Webpack4系列教程(六) 多頁面解決方案

寫在前面

在這篇博客中，我將會你介紹多頁面解決方案

基本配置

目錄結構

代碼

module.exports = {
    entry: {
        pageA: './src/pageA.js',
        pageB: './src/pageB.js'
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js',
        path: path.resolve('dist')
    },
    mode: 'development',
    plugins: [
        new CleanPlugin('dist'),
        new HtmlPlugin({
            template: './src/index.html',
            hash: true
        })
    ]
}

打包結果

打開pageA.bundle.js和pageB.bundle.js對比發現，它們都引用了common.js及jquery.js公共文件，且都有一套webpackBootstrap執行代碼，這些重複的代碼應該打包在一個文件裏，然後pageA.bundle.js和pageB.bundle.js引用就好了

splitChunksPlugin && runtimeChunkPlugin

相關配置可參考這篇博客：webpack4 splitChunksPlugin && runtimeChunkPlugin 配置雜記

optimization: {
    splitChunks: {
        cacheGroups: {
            vendor: {
                name: 'vendor',
                test: /[\\/]node_modules[\\/]/,
                chunks: 'all',
                priority: 1
            },
            common: {
                name: 'common',
                chunks: 'all',
                minSize: 1,
                minChunks: 2,
                priority: 0
            }
        }
    },
    runtimeChunk: {
        name: 'manifest'
    }
}

打包結果