webpack4.x相關筆記整理

概念

Webpack是一個 模組打包機，它可以將我們專案中的所有js、圖片、css等資源，根據其入口檔案的依賴關係，打包成一個能被瀏覽器識別的js檔案。能夠幫助前端開發將打包的過程更智慧化和自動化。

WebPack和Grunt以及Gulp相比有什麼特性

Webpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模組化的解決方案，不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。

開始使用

安裝webpack，目前webpack已更新到4.x版本，且大力度宣傳的是 cli 方式啟動，更推崇的是讓開發者使用高度封裝的 cli。基於此，我們應該安裝 webpack^4.1.1、webpack-cli^2.0.10 (想要執行webpack的命令必須有這個包) 、webpack-dev-server^3.1.0。

webpack的mode

webpack4 的 mode 給出了兩種配置： development 和 production 。生產模式下，啟用了 程式碼壓縮、作用域提升（scope hoisting）、 tree-shaking，使程式碼最精簡；開發模式下，相較於更小體積的程式碼，提供的是打包速度上的優化。所以，我們一般配置2個檔案，webpack.dev.conf.js和webpack.prod.conf.js。修改package.json裡面的scripts：

"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}

按專案搭建訴求加入配置

一般訴求：

1. js的處理：轉換 ES6 程式碼，解決瀏覽器相容問題

2. css的處理：編譯css，自動新增字首，抽取css到獨立檔案

3. html的處理：複製並壓縮html檔案

4. dist的清理：打包前清理源目錄檔案

5. assets的處理：靜態資源處理

6. server的啟用：development 模式下啟動伺服器並實時重新整理

7. source-map

8. eslint

1.轉換js，解決相容性問題，用 babel 轉換 ES6 程式碼，用 babel 轉換 ES6 程式碼需要使用到 babel-loader，我們需要安裝一系列的依賴：

npm i babel-core babel-loader babel-preset-env --save-dev

然後在根目錄新建一個babel配置檔案 .babelrc ：

{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"last 2 iOS major versions",
"last 2 Android major versions"
],
"ios":"8.2"
},
"exclude":["es6.promise"],
"useBuiltIns": "usage",
"debug": true
}
]
],
"plugins": ["@babel/transform-runtime"]
}

Babel預設只轉換新的JavaScript/">JavaScript語法，而不轉換新的API。 例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全域性物件，以及一些定義在全域性物件上的方法（比如 Object.assign）都不會轉譯。 如果想使用這些新的物件和方法，則需要為當前環境提供一個polyfill。

解決方案一：

引入babel-polyfill，它會”載入整個polyfill庫”，針對編譯的程式碼中新的API進行處理，並且在程式碼中插入一些幫助函式。

解決方案二：

babel-runtime

兩種方案區別：

babel-polyfill解決了Babel不轉換新API的問題，但是直接在程式碼中插入幫助函式，會導致汙染了全域性環境，並且不同的程式碼檔案中包含重複的程式碼，導致編譯後的程式碼體積變大。babel-runtime配置了之後，打包時會“按需載入”，當用到某個polifill時再引入對應的墊子，這樣可以減少體積。但在某些情況下仍然不能被babel-runtime替代， 例如，程式碼：[1, 2, 3].includes(3)，Object.assign({}, {key: 'value'})，Array，Object以及其他”例項”下es6的方法，babel-runtime是無法支援的， 因為babel-runtime只支援到static的方法。

因此，babel-runtime適合在元件，類庫專案中使用，而babel-polyfill適合在業務專案中使用。

babel-runtime版本搭配注意：

//安裝babel-runtime和babel-plugin-transform-runtime，配置如下：
{
"plugins": ["transform-runtime"]
}
//高版本的babel，安裝@babel/plugin-transform-runtime、@babel/runtime
{
"plugins": ["@babel/transform-runtime"]
}

2.轉換css

相關的loder：less-loader、 、css-loader、style-loader等。利用 mini-css-extract-plugin 來打包到一個檔案裡面。參考程式碼：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env, argv) => {
const devMode = argv.mode !== 'production'
return {
module: {
rules: [
{
test: /\.css$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
}

3.處理html檔案，一般用，參考程式碼：

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};

更多配置解釋，參考 https://segmentfault.com/a/1190000007294861

4.清理

每次打包，都會生成專案的靜態資源，隨著某些檔案的增刪，我們的 dist 目錄下可能產生一些不再使用的靜態資源，webpack並不會自動判斷哪些是需要的資源，為了不讓這些舊檔案也部署到生產環境上佔用空間，所以在 webpack 打包前最好能清理 dist 目錄。

const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin(['dist']),
]
};

5.資源處理

{
test: /\.html$/,
loader: 'art-template-loader',
}, {
test: /\.jpg$/,
loader: 'url-loader?mimetype=image/jpg'
}, {
test: /\.png$/,
loader: 'url-loader?mimetype=image/png'
},
{
test: /\.svg/,
loader: 'url-loader?mimetype=image/svg+xml'
}

6.server的啟用

"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}

7.開啟source-map

devtool: "inline-source-map" //詳細到打包前的每個沒被壓縮的檔案
or
devtool: "source-map" //打包後的未壓縮檔案

8.配置eslint

8.1要使webpack支援eslint，就要要安裝 eslint-loader。

{
test: /\.js$/,
loader: 'eslint-loader',
enforce: "pre",
include: [path.resolve(__dirname, 'src')], // 指定檢查的目錄
options: { // 這裡的配置項引數將會被傳遞到 eslint 的 CLIEngine
formatter: require('eslint-friendly-formatter') // 指定錯誤報告的格式規範，formatter預設是stylish，如果想用第三方的要另外安裝
}
}

8.2安裝eslint，建立配置檔案 '.eslintrc.js'

module.exports = {
'root': true,
'plugins': [
'html'
],
'settings': {
'html/html-extensions': ['.wxml']
},
'rules': {
'newline-per-chained-call': 'off',
'eqeqeq': 'off',
'indent': ['error', 4, { SwitchCase: 1 }],
'prefer-rest-params': 'off',
'prefer-template': 'off',
'array-callback-return': 'off',// 暫時關閉
'prefer-const': 'warn',


'no-restricted-properties': [2, {
'object': 'wx',
'property': 'navigateTo',
'message': 'Please use this.$goto!!!'
}]
}
}

更多詳細細節看文件： http://eslint.cn/docs/user-guide

production相關的一些配置

1、程式碼壓縮，uglifyjs-webpack-plugin

new UglifyJsPlugin({
test: /.js$|.jsx$/i,
uglifyOptions: {
compress: {
pure_funcs: ['console.log', 'alert']
},
},
})

2.提取公共模組

output: {
...
chunkFilename: '[name].[chunkhash:8].js'
},
...
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'common',
chunks: 'all'
}
}
}
}

詳細參考： https://www.cnblogs.com/ufex/p/8758792.html