【webpack】指南
官網指南地址javascript
管理資源&管理輸出
管理資源
webpack最出色的功能之一就是，除了JavaScript，還能夠經過loader引入任何其餘類型的文件。webpack.config.js配置以下：css
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
}
};
複製代碼
管理輸出
配置
HtmlWebpackPlugin插件自動生成index.html；配置CleanWebpackPlugin插件自動清理dist目錄；WebpackManifestPlugin插件能夠提取manifest。webpack.config.js配置以下：html
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
複製代碼
開發環境&生產環境
- 開發環境(
development)和生產環境(production)的構建目標差別很大。 - 在開發環境中，咱們須要具備強大的、具備實時從新加載(
live reloading)或熱模塊替換(hot module replacement)能力的source map和localhost server。 - 而在生產環境中，咱們的目標則轉向於關注更小的
bundle，更輕量的source map，以及更優化的資源，以改善加載時間。 - 因爲要遵循邏輯分離，咱們一般建議爲每一個環境編寫彼此獨立的
webpack配置。 - 可是，咱們會遵循不重複原則，保留一個「通用」配置。咱們將使用一個名爲
webpack-merge的工具合併配置
npm install --save-dev webpack-merge
複製代碼
開發模式&模塊熱替換
生產環境
- 代碼壓縮：
UglifyJSPlugin或其餘工具 source map用仍是不用？- 許多
library將經過與process.env.NODE_ENV環境變量關聯，以決定library中應該引用哪些內容
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
複製代碼
ExtractTextPlugin：將CSS分離成單獨的文件CLI替代選項：原來用的一些插件如今能夠替換成一些優化配置項：例如，--optimize-minimize標記將在後臺引用UglifyJSPlugin。和以上描述的DefinePlugin實例相同，--define process.env.NODE_ENV="'production'"也會作一樣的事情。而且，webpack -p將自動地調用上述這些標記，從而調用須要引入的插件。
構建性能
- 保持版本最新：
webpack/node/npm - 儘可能少使用不一樣的工具
loader/plugins；必要的話也用在儘可能最少數的必要模塊中；能夠將很是消耗資源的 loaders 轉存到worker pool中
//使用 include 字段僅將 loader 模塊應用在實際須要用其轉換的位置中：
{
test: /\.js$/,
include: path.resolve(__dirname, "src"),
loader: "babel-loader"
}
複製代碼
Dlls：使用DllPlugin將更改不頻繁的代碼進行單獨編譯。這將改善引用程序的編譯速度，即便它增長了構建過程的複雜性。Smaller = Faster：減小編譯的總體大小，以提升構建性能。儘可能保持chunks小巧。- 使用
cache-loader啓用持久化緩存。使用package.json中的postinstall清除緩存目錄。thread-loader能夠將很是消耗資源的loaders轉存到worker pool中 - 提升解析速度：
- 儘可能減小
resolve.modules, resolve.extensions, resolve.mainFiles, resolve.descriptionFiles中類目的數量，由於他們會增長文件系統調用的次數。 - 若是你不使用
symlinks，能夠設置resolve.symlinks: false。 - 若是你使用自定義解析
plugins，而且沒有指定context信息，能夠設置resolve.cacheWithContext: false。
- 儘可能減小
- 開發環境中
- 硬避免在生產環境下才會用到的工具：
UglifyJsPlugin、ExtractTextPlugin、[hash]/[chunkhash]、AggressiveSplittingPlugin、AggressiveMergingPlugin、ModuleConcatenationPlugin - 不一樣的
devtool的設置，會致使不一樣的性能差別 - 在內存中進行代碼的編譯和資源的提供，但並不寫入磁盤來提升性能：
webpack-dev-server - 儘可能減小入口
chunk的體積，以提升性能
- 硬避免在生產環境下才會用到的工具：
- 其餘
tree shaking
tree shaking是一個術語，一般用於描述移除JavaScript上下文中的未引用代碼(dead-code)。新的webpack 4正式版本，擴展了這個檢測能力，經過package.json的sideEffects屬性做爲標記，向compiler提供提示，代表項目中的哪些文件是pure(純的ES2015模塊)"，由此能夠安全地刪除文件中未使用的部分。vue
sideEffects：將文件標記爲無反作用 如同上面提到的，若是全部代碼都不包含反作用，咱們就能夠簡單地將該屬性標記爲 false，來告知 webpack，它能夠安全地刪除未用到的 export 導出。
{
"name": "your-project",
"sideEffects": false
}
複製代碼
若是你的代碼確實有一些反作用，那麼能夠改成提供一個數組：java
{
"name": "your-project",
"sideEffects": [
"./src/some-side-effectful-file.js"
]
}
複製代碼
- 壓縮輸出：經過如上方式，咱們能夠，找出那些須要刪除的「未使用代碼」，然而，咱們不僅是要找出，還須要在
bundle中刪除它們。爲此，咱們將使用-p(production)這個webpack編譯標記，來啓用uglifyjs壓縮插件。- 注意，
--optimize-minimize標記也會在webpack內部調用UglifyJsPlugin。） - 從
webpack 4開始，也能夠經過mode配置選項輕鬆切換到壓縮輸出，只需設置爲production。
- 注意，
懶加載（動態導入/按需加載）
在
vue單頁應用中，當項目不斷完善豐富時，即便使用webpack打包，文件依然是很是大的，影響頁面的加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，當路由被訪問時才加載對應的組件（也就是按需加載），這樣就更加高效了。——引自vue-router官方文檔node
非動態加載時的打包狀況以下圖： jquery
hello組件的加載方式
改成路由懶加載[import()語法],在進行打包
// import Hello from '@/components/Hello'
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
// component: Hello,
component: () => import('@/components/Hello')
}
]
})
複製代碼
- 很明顯的看到，打包後有
4個js文件，仔細的同窗還發現，app.js文件的大小加上新多出文件的大小，約等於沒有分割打包的app的大小。 - 這樣等於異步加載的組件，是單獨打包成了一個
js，在頁面首次加載的時候不須要加載他，等到請求相應的頁面的時候在去服務器請求它，減少了頁面首屏加載的時間。 webpack.prod.conf.js中配置output.chunkFilename規定了打包異步文件的格式
//webpack.prod.conf.js:生產打包js
//utils.assetsPath是utils.js中封裝的一個路徑相關的方法
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
/** 本人在本身的工程中刪除或修改chunkFilename的配置， 最後仍是都按這個規則生產js文件了， Why? */
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
複製代碼
- 不須要刻意懶加載。下面的案例中，代碼確實會在腳本運行的時候產生一個分離的代碼塊
lodash.bundle.js，在技術概念上「懶加載」它。問題是加載這個包並不須要用戶的交互 -- 意思是每次加載頁面的時候都會請求它。這樣作並無對咱們有不少幫助，還會對性能產生負面影響。
//src/index.js
- import _ from 'lodash';
-
- function component() {
+ function getComponent() {
- var element = document.createElement('div');
-
- // Lodash, now imported by this script
- element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
+ var element = document.createElement('div');
+
+ element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+
+ return element;
+
+ }).catch(error => 'An error occurred while loading the component');
}
- document.body.appendChild(component());
+ getComponent().then(component => {
+ document.body.appendChild(component);
+ })
複製代碼
- 當頁面有個按鈕點擊事件時，須要加載某個組件，這種用戶交互的情景下，咱們可使用懶加載；固然，路由也是交互的一種。
緩存
客戶端（一般是瀏覽器）獲取資源是比較耗費時間的。能夠經過命中緩存，以下降網絡流量，使網站加載速度更快；然而，緩存的存在可能會使你獲取新代碼時比較棘手（文件名不變的話）。如何經過必要的配置，以確保
webpack編譯生成的文件可以被客戶端緩存，而在文件內容變化後，可以請求到新的文件。webpack
- 經過使用
output.filename進行文件名替換
- 若是咱們不作修改，而後再次運行構建，咱們覺得文件名會保持不變。然而，若是咱們真的運行，可能會發現狀況並不是如此（譯註：若是不作修改，文件名可能會變，也可能不會。）
- 這也是由於
webpack在入口chunk中，包含了某些樣板(boilerplate)，特別是runtime和manifest。（譯註：樣板(boilerplate)指webpack運行時的引導代碼） - 即：若是
webpack生成的hash發生改變，manifest文件也會發生改變。所以，vendor bundle的內容也會發生改變，而且失效。因此，咱們須要將manifest文件提取出來。 - 用
CommonsChunkPlugin將manifest提取出來
webpack裏每一個模塊都有一個module id，module id是該模塊在模塊依賴關係圖裏按順序分配的序號，若是這個module id發生了變化，那麼他的chunkhash也會發生變化。- 這樣會致使：若是你引入一個新的模塊，會致使
module id總體發生改變，可能會致使全部文件的chunkhash發生變化，這顯然不是咱們想要的 - 這裏須要用
HashedModuleIdsPlugin，根據模塊的相對路徑生成一個四位數的hash做爲模塊id，這樣就算引入了新的模塊，也不會影響module id的值，只要模塊的路徑不改變的話。
new webpack.HashedModuleIdsPlugin()
複製代碼
建立library
除了打包應用程序代碼，
webpack還能夠用於打包JavaScript library；即咱們平時npm install下來的那種依賴包git
個人demo：element-ui表單的二次封裝github
最後，
package.json中配置"main": "dist/ginna-form.js";咱們從node_modules引入時就靠這個屬性來找到對應的文件的哦。
shimming
webpack編譯器(compiler)可以識別遵循ES2015模塊語法、CommonJS或AMD規範編寫的模塊。然而，一些第三方的庫(library)可能會引用一些全局依賴（例如jQuery中的$）。這些庫也可能建立一些須要被導出的全局變量。 這些「不符合規範的模塊」就是shimming發揮做用的地方
shim：一種庫(library)的抽象，這種庫能將一個新的API引入到一箇舊的環境中，並且僅靠舊的環境中已有的手段實現。polyfill就是一個用在瀏覽器API上的shim。
1. 讓jQuery做爲全局變量，能夠被別的組件引用
2. 將模塊中的this置爲window
當模塊運行在 CommonJS 環境下this會變成一個問題，也就是說此時的 this 指向的是 module.exports。在這個例子中，你能夠經過使用 imports-loader 覆寫 this：
3. 某個庫(library)建立出一個全局變量，它指望用戶使用這個變量
- 你可能歷來沒有在本身的源碼中作過這些事情，可是你也許遇到過一個老舊的庫(
library)，和下面所展現的代碼相似。 - 在下圖用例中，咱們可使用
exports-loader，將一個全局變量做爲一個普通的模塊來導出。例如，爲了將file導出爲file以及將helpers.parse導出爲parse
4. babel-polyfill 按需加載
Babel是一個普遍使用的轉碼器，能夠將ES6代碼轉爲ES5代碼，從而能夠在現有環境執行，因此咱們能夠用ES6編寫，而不用考慮環境支持的問題。Babel默認只轉換新的JavaScript語法（syntax），如箭頭函數等，而不轉換新的API，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼；所以咱們須要polyfill；
5. 深度優化包babel-preset-env
babel-preset-env是一個新的preset，能夠根據配置的目標運行環境（environment）自動啓用須要的babel插件- 以前咱們寫
javascript代碼時，須要使用N個preset，好比：babel-preset-es201五、babel-preset-es2016。es2015能夠把ES6代碼編譯爲ES5，es2016能夠把ES2016代碼編譯爲ES6。babel-preset-latest能夠編譯stage 4進度的ECMAScript代碼。 - 問題是咱們幾乎每一個項目中都使用了很是多的
preset，包括沒必要要的。 babel-preset-env的工做方式相似babel-preset-latest，惟一不一樣的就是它會根據配置的env只編譯那些還不支持的特性。- 使用這個插件，你講不再須要使用
es20xx presets了。
6. 其餘工具
- 還有一些其餘的工具可以幫助咱們處理這些老舊的模塊。
script-loader會在全局上下文中對代碼進行取值，相似於經過一個script標籤引入腳本。在這種模式下，每個標準的庫(library)都應該能正常運行- 這些老舊的模塊若是沒有
AMD/CommonJS規範版本，但你也想將他們加入dist文件，你可使用noParse來標識出這個模塊
noParse:這是module中的一個屬性，
做用：不去解析屬性值表明的庫的依賴
舉例：
咱們通常引用jquery，能夠以下引用：
import jq from 'jquery'
對於上面的解析規則：
當解析jq的時候，會去解析jq這個庫是否有依賴其餘的包
咱們對相似jq這類依賴庫，通常會認爲不會引用其餘的包(特殊除外,自行判斷)。
因此，對於這類不引用其餘的包的庫，咱們在打包的時候就沒有必要去解析，
這樣可以增長打包速率。
因此，能夠在webpack的配置中增長noParse屬性
（如下代碼只須要看module的noParse屬性）
module.exports = {
mode:'development',
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
noParse:/jquery/,//不去解析jquery中的依賴庫
rules:[ ]
}
}
複製代碼
漸進式網絡應用程序PWA
漸進式網絡應用程序(
Progressive Web Application - PWA)，是一種能夠提供相似於原生應用程序(native app)體驗的網絡應用程序(web app)。PWA能夠用來作不少事。其中最重要的是，在離線(offline)時應用程序可以繼續運行功能。這是經過使用名爲Service Workers的網絡技術來實現的。
//print.js
export default function printMe() {
console.log('I get called from print.js!');
}
//index.js
import printMe from './print.js';
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./service-worker.js').then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
var btn = document.createElement('button');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
//3個插件都須要npm install --save-dev
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
title: 'Progressive Web Application'
}),
//添加 Workbox
new WorkboxPlugin.GenerateSW({
// 這些選項幫助 ServiceWorkers 快速啓用
// 不容許遺留任何「舊的」 ServiceWorkers
clientsClaim: true,
skipWaiting: true
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
//package.json配置腳本
"scripts": {
"build": "webpack",
//使用一個簡易服務器，搭建出咱們所需的離線體驗
//npm install http-server --save-dev
"start": "http-server dist"
},
複製代碼
- 有了
Workbox，咱們再看下執行npm run build時會發生什麼
clean-webpack-plugin: /mnt/c/Source/webpack-follow-along/dist has been removed.
Hash: 6588e31715d9be04be25
Version: webpack 3.10.0
Time: 782ms
Asset Size Chunks Chunk Names
app.bundle.js 545 kB 0, 1 [emitted] [big] app
print.bundle.js 2.74 kB 1 [emitted] print
index.html 254 bytes [emitted]
precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js 268 bytes [emitted]
service-worker.js 1 kB [emitted]
[0] ./src/print.js 87 bytes {0} {1} [built]
[1] ./src/index.js 477 bytes {0} [built]
[3] (webpack)/buildin/global.js 509 bytes {0} [built]
[4] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module
Child html-webpack-plugin for "index.html":
1 asset
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 2 hidden modules
複製代碼
- 如今你能夠看到，生成了 2 個額外的文件：
service-worker.js(或sw.js) 和體積很大的precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js。sw.js是Service Worker文件，precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js是sw.js引用的文件，因此它也能夠運行 - 而後用
npm start啓動服務。訪問http://localhost:8080/index.html並查看console控制檯。在那裏你應該看到：
SW registered
複製代碼
- 如今來進行測試。中止服務器並刷新頁面。若是瀏覽器可以支持
Service Worker，你應該能夠看到你的應用程序還在正常運行。然而，服務器已經中止了服務，此刻是Service Worker在提供服務。
TypeScript
準備工做：
ts-loader插件、tsconfig.json配置文件（和package.json同級）、ts文件中如何使用第三方庫（ts聲明文件*.d.ts）
webpack.config.js配置
tsconfig.json案例：
- 使用第三方庫 當從
npm安裝第三方庫時，必定要牢記同時安裝這個庫的類型聲明文件。你能夠從TypeSearch中找到並安裝這些第三方庫的類型聲明文件。舉個例子，若是想安裝lodash這個庫的類型聲明文件，咱們能夠運行下面的命令：npm install --save-dev @types/lodash TypeScript學習
相關文章
- 1. webpack 入門指南
- 2. Webpack使用指南
- 3. webpack配置指南
- 4. Webpack 入門指南
- 5. webpack入門指南
- 6. Webpack開發指南
- 7. webpack入門指南（基於webpack v4.41.2）
- 8. webpack webpack-dev-server使用指南
- 9. Webpack的使用指南-Webpack小結
- 10. 【Webpack的使用指南 01】Webpack入門
- 更多相關文章...
- • SQL 指南 - 網站建設指南
- • HTML 指南 - 網站建設指南
- • 算法總結-雙指針
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
