建立一個項目my-webpack-senior
初始化項目：
npm init -y
使用yarn裝jquery:
yarn add jquery --save
繼續安裝包依賴：
yarn add webpack-cli --save--dev
yarn add webpack --save-dev
yarn add webpack-dev-server html-webpack-plugin --save-dev
其他操作按照https://blog.csdn.net/zerobaek/article/details/87117481進行
package.json檔案裡面的dev屬性不需要加content-base是因為html-webpack-plugins插件已經将index.html加入到記憶體裡面去了會被托管在項目的根目錄（根目錄是預設的托管目錄）檔案下面，預設會打開根目錄，而根目錄下面又有index.html檔案就會被直接打開，是以不需要添加contentbase
配置loader：
yarn add style-loader css-loader sass-loader node-sass url-loader file-loader --save-dev
配置babel：
yarn add babel-core [email protected] babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 --save-dev
配置釋出階段的腳本和配置檔案：
将釋出階段的配置檔案命名為webpack.pub.config.js
在package.json檔案的scripts屬性中加上項目釋出後運作的指令屬性
運作npm run pub會去讀取webpack.pub.config.js這個配置檔案
"pub": "webpack --config webpack.pub.config.js"
會報錯：
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any def
解決辦法：
"pub": "webpack --config webpack.pub.config.js --mode development"
配置圖檔打包後存放到images中：
修改一下圖檔的處理規則和比對規則，将圖檔放到images目錄下
{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=669185&name=images/[hash:8]-[name].[ext]' }
每次釋出前删除dist目錄：
安裝插件：
yarn add clean-webpack-plugin --save-dev
在配置檔案中，導入每次删除檔案的插件
const cleanWebpackPlugin = require('clean-webpack-plugin')
在plugins節點裡面new一個cleanWebpackPlugin(["删除檔案1","删除檔案2",...])對象
new cleanWebpackPlugin(['dist'])
報錯：
clean-webpack-plugin only accepts an options object.
修改：
new cleanWebpackPlugin()
分離第三方包:
分離第三方包有利于減少bundle.js的體積
釋出思路： bundle.js 中隻存放 自己的代碼， 第三方包的代碼，全部抽離到 另外的JS中
修改配置檔案：
const webpack = require('webpack')
修改入口節點：
entry: { // 配置入口節點
app: path.join(__dirname, './src/main.js'),
vendors1: ['jquery'] // 把要抽離的第三方包的名稱，放到這個數組中
}
将bundle.js檔案放到js檔案目錄下，js檔案用來存放所有打包好的js檔案：
output: {
path: path.join(__dirname, './dist'),
filename: 'js/bundle.js'
}
修改插件節點：
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors1', // 指定要抽離的入口名稱
filename: 'js/vendors.js' // 将來再釋出的時候，除了會有一個 bundle.js ，還會多一個 vendors.js 的檔案，裡面存放了所有的第三方包
})
vendors.js檔案裡面存放了所有的第三方包
會報錯，因為4.x版本後不支援 CommonsChunkPlugin：
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
解決辦法：
optimization與plugins同級
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "vendors1",
chunks: "initial",
minChunks: 2
}
}
}
}
壓縮JS代碼：
new webpack.optimize.UglifyJsPlugin({
compress: { // 配置壓縮選項
warnings: false // 移除警告
}
}),
new webpack.optimize.DedupePlugin({ // 設定為産品上線環境，進一步壓縮JS代碼
'process.env.NODE_ENV': '"production"'
})
會報錯，因為4.x版本後不支援 UglifyJsPlugin ：
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
解決辦法：
安裝
yarn add uglifyjs-webpack-plugin --save-dev
在配置檔案中導入插件：
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
minimizer與splitChunks同級
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true, // Must be set to true if using source-maps in production
})
],
繼續報錯：
webpack.optimize.DedupePlugin is not a constructor
解決辦法：
移除即可
繼續報錯：
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
解決辦法：
yarn add [email protected] --save-dev
壓縮HTML頁面：
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html',
minify: {
collapseWhitespace: true, // 合并多餘的空格
removeComments: true, // 移除注釋
removeAttributeQuotes: true // 移除 屬性上的雙引号
}
})
minify的其他優化項
抽取樣式表檔案并處理CSS路徑：
因為bundle.js裡面還會包含css檔案，這也會影響bundle.js檔案的體積
安裝插件
yarn add extract-text-webpack-plugin --save-dev
導入抽取CSS的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin")
在插件節點中加入，把抽取出的css檔案放到css目錄下面
new ExtractTextPlugin("css/styles.css")
将抽取出的css檔案放到css目錄下面，這樣做也會影響放在images下面的圖檔，因為會影響路徑，解決辦法：
修改第三方檔案比對規則
{
test: /\.css$/, use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader",
publicPath: '../' // 指定抽取的時候，自動為我們的路徑加上 ../ 字首
})
},
{
test: /\.scss$/, use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: '../' // 指定抽取的時候，自動為我們的路徑加上 ../ 字首
})
}
壓縮CSS檔案：
安裝插件
yarn add optimize-css-assets-webpack-plugin --save-dev
導入壓縮CSS的插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
在插件節點中加入
new OptimizeCssAssetsPlugin()
通路dist下面的index.html，最終會得到這個頁面
其餘補充可以看看這個文檔https://blog.csdn.net/harsima/article/details/80819747