webpack 4的簡易配置

今天早晨醒來看了下 新冠肺炎疫情狀況，今天明顯有好轉，希望“春天”儘快來臨吧！😄

哎，不能去公司上班，在家呆着也好無聊，手頭工作也不多～～～～

因爲疫情，在家辦公室效率低，工資都降了，如果疫情一直不好，那豈不是要餓死的節奏？？？

不管怎麼樣，還是得不斷鞏固、學習新知識，那我們今天來回顧下 webpack 對簡單配置項吧！

實現功能

• 自動注入js
• 開發環境熱更新
• 抽離CSS
• 壓縮JS、CSS、Html
• 第三方非業務依賴包的抽離
• 公共代碼包的抽離
• 開發環境線上環境的區分
• devServer請求攔截
• 配置別名
• es6、scss、圖片、字體的加載

package.json

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
}

webpack.config.js

// 處理html
const HtmlWebPackPlugin = require('html-webpack-plugin')
// 清空dist
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 分離CSS
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 壓縮js
const TerserJSPlugin = require('terser-webpack-plugin');
// 壓縮css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 處理文件的絕對路徑
const path = require('path');
// body-parser中間件，處理post請求傳參
const bodyParser = require('body-parser');

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // entry: {
    //  多個入口文件
    //     index: './src/index.js',
    //     order: './src/order.js'
    // },

    // 出口配置
    output: {
        filename: 'assets/[name].[hash:6].js',  // 生成文件的名字
        publicPath: '/dist',
        path: path.join(__dirname, 'dist')  // 生成文件的路徑
    },

    // 加載模塊，配置各種loader
    module: {
        rules: [
            {
                test: /\.(sass|scss|css)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: {
                    loader: 'url-loader',
                    options: {
                      // 1024 = 1kb
                      limit: 10240,
                      name: 'assets/[name].[hash:6].[ext]',
                    }
                }
            },
            {
                test: /\.(eot|ttf|svg|woff2?)$/,
                use: ['url-loader']
            }
        ]
    },
    // 插件
    plugins: [
        // 打包前清空
        new CleanWebpackPlugin(),
        // 自動注入
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            inject: true
        }),
        // 抽離css
        new MiniCssExtractPlugin({
            filename: 'assets/[name].css',
            chunkFilename: 'assets/[id].css'
        })
    ],
    // 服務配置
    devServer: {
        // open: true, // 自動打開瀏覽器
        port: 10001,    // 指定端口號
        host: '0.0.0.0',
        hot: true,   // 熱更新
        before(app){    // 請求攔截
            app.post('/loader/list', bodyParser.json(), (req, res, next)=>{
                console.log('req...', req);
                console.log('查詢參數...', req.query);
                console.log('body體...', req.body)
                res.json({
                    code: 1,
                    msg: '請求成功',
                    data: ['node-sass', 'sass-loader', 'css-loader', 'file-loader', 'url-loader', 'style-loader']
                })
            })
        }
    },
    resolve: {
        // 配置別名
        alias: {
            '@': path.join(__dirname, 'src')
        }
    },
    // 優化的配置
    optimization: {
        minimizer: [
            // 壓縮js
            new TerserJSPlugin({}),
            // 壓縮css
            new OptimizeCSSAssetsPlugin({})
        ],
        // 包的分離，分離出非業務邏輯相關的包
        splitChunks: {
            cacheGroups: {
                vendor: {   // 抽離第三方插件
                    test: /node_modules/,   // 指定是node_modules下的第三方包
                    chunks: 'initial',
                    name: 'vendor',  // 打包後的文件名，任意命名    
                    // 設置優先級，防止和自定義的公共代碼提取時被覆蓋，不進行打包
                    priority: 10    
                },
                utils: { // 抽離自己寫的公共代碼，utils這個名字可以隨意起
                    chunks: 'initial',
                    name: 'utils',  // 任意命名
                    minChunks: 2,   // 引用次數最少兩次
                    minSize: 0    // 只要超出0字節就生成一個新包
                }
            }
        }
    }
}