webpack 4遷移指南

webpack 4 出來也已經一年了，公司的老項目用的仍是webpack3，也是時候該升級一波了。說實話webpack4仍是有幾點挺吸引個人，估計也是感覺到了parcel的壓力，4這個版本內置了不少默認配置。

遷移的坑

1. CommonsChunkPlugin 廢除， webpack 4內置了optimization.splitChunks 和 runtimeChunk 進行代碼拆分
2. ExtractTextPlugin 不支持webpack4，官方推薦了一個MiniCssExtractPlugin來拆分chunk中的css代碼
3. vue-loader 的升級，vue-loader 版本由14 升級到了15, 以前的配置也改變了具體參考從 v14 遷移

基礎配置

const package = require('../package.json');
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const utils = require('./utils');

function resolve (dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    entry: {
        main: '@/main',
        'vender-exten': '@/vendors/vendors.exten.js'
    },
    output: {
        path: path.resolve(__dirname, '../dist/' + package.version) // 輸出文件的絕對路徑
    },
    module: {
        rules: [
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                exclude: /node_modules/,
                options: {
                    emitError: true,
                    emitWarning: false,
                    failOnError: true
                }
            },
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: utils.assetsPath('img/[name].[hash:7].[ext]')
                    }
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: utils.assetsPath('media/[name].[hash:7].[ext]')
                    }
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                    }
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            '@': resolve('../src')
        }
    },
    externals: {
        AMap: 'AMap',
        vue: 'Vue',
        iview: 'iview',
        'vue-router': 'VueRouter',
        vuex: 'Vuex'
    }
};

如上，實現了對vue，jsx, js, 和資源文件對處理和轉譯

開發環境配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
const merge = require("webpack-merge");
const webpackBaseConfig = require("./webpack.base.config.js");
const config = require("./config");
const webpack = require("webpack");


module.exports = merge(webpackBaseConfig, {
    mode: 'development',
    devtool: '#source-map',
    output: {
        publicPath: '/dist/',
        filename: '[name].js',
        chunkFilename: '[name].chunk.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'admin management',
            filename: '../index.html',
            inject: false
        }),
    ],

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            }
        ]
    },

    //設置跨域代理
    devServer: {
        public: 'local.xxxx.net:9000',
        port: 9000,
        proxy: {
            '/login': {
                target: config.devApi.passport, 
                pathRewrite: { '^/login': '/login' },
                changeOrigin: true
            },
            '/v3': {
                target: config.devApi.sass,
                pathRewrite: { '^/v3': '/v3' },
                changeOrigin: true
            }
        }
    }
});

如上，配置了開發環境的配置，注意webpack4多了一個mode，mode有三個選項能夠選擇：development, production, 和none，

能夠看官方的這個圖，webpack會根據mode自動開啓內置插件

生產環境配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserJSPlugin = require('terser-webpack-plugin');
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const webpackBaseConfig = require('./webpack.base.config.js')
const path = require('path')
const package = require('../package.json')

module.exports = merge(webpackBaseConfig, {
    mode: 'production', 
    output: {
        publicPath: '/' + package.version + '/', // 全部引入的文件資源都加上publicPath路徑
        filename: '[name].[contenthash].js', // 輸出 bundle 的名稱, 入口(non-entry)
        chunkFilename: '[name].[contenthash].chunk.js' // 非入口(non-entry) chunk 文件的名稱
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                // 緩存組
                commons: {
                    test: /[\\/]node_modules[\\/]/, // 只抽取引入的node_modules文件
                    name: 'vender-exten', // 要緩存的 分隔出來的 chunk 名稱
                    chunks: 'all' // 對全部的chunk都進行緩存
                }
            }
        },
        runtimeChunk: {
            name: 'runtime'
        }, 
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
    },
    module: {
        rules: [
            {
                test: /\.css?$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[name].[contenthash].css'
        }),
        new cleanWebpackPlugin(['dist/*'], {
            root: path.resolve(__dirname, '../')
        }),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, '../static'),
                to: '../static',
                ignore: ['.*']
            }
        ]),
        new HtmlWebpackPlugin({
            title: 'admin',
            favicon: './static/favicon.ico',
            filename: '../index.html',
            template: '!!ejs-loader!./src/template/index.ejs',
            inject: false
        })
    ]
});

生產環境


1.使用MiniCssExtractPlugin，來拆分css，我能夠能夠options裏面有兩個值filename和chunkFilename, filename指的是entry中key生成的css名稱， chunkFilename是webpack中每一個chunk拆分生成css的名稱。

2.使用OptimizeCSSAssetsPlugin 對打包以後的css文件進行壓縮,

3.使用splitChunks對公共代碼進行抽取緩存，咱們先來看一下這個插件的默認配置

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'async',  "initial" | "all"(推薦) | "async" (默認就是async)
            minSize: 30000, 最小尺寸，30000
            maxSize: 0, 最小尺寸
            minChunks: 1, 最小 chunk ，默認1
            maxAsyncRequests: 5, // 最大異步請求數， 默認5
            maxInitialRequests: 3, // 最大初始化請求書，默認3
            automaticNameDelimiter: '~', // 打包分隔符
            name: true,
            cacheGroups: { // 重點，緩存配置
                vendors: {
                    test: /[\\/]node_modules[\\/]/, // 只緩存node_modules裏面的模塊
                    priority: -10 // // 緩存組優先級,可能有多個
                },
            }
        }
    }
};

看下個人配置

splitChunks: {
    cacheGroups: {
        // 緩存組
        commons: {
            test: /[\\/]node_modules[\\/]/, // 只抽取引入的node_modules文件
            name: 'vender-exten', // 要緩存的 分隔出來的 chunk 名稱
            chunks: 'all' // 對全部的chunk都進行緩存
        }
    }
}

經過webpack-bundle-analyzer生成的可視化圖標分析查看項目中的多個chunk共同引入的lib包

抽離5個依賴的lib包，進行緩存<br/><br/>
4.使用optimization.runtimeChunk,去緩存生成chunk過程當中生成的webpack公用代碼<br/><br/>
5.使用TerserJSPlugin對js進行壓縮