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'
    }
}

打包結果