具有不同捆绑包的 Webpack 多个入口点答案

【问题标题】：Webpack multiple entry point with different bundle具有不同捆绑包的 Webpack 多个入口点
【发布时间】：2018-11-22 01:45:56
【问题描述】：

我使用webpack 4，我有两个入口点并使用HtmlWebpackPlugin 在html 中使用<%=htmlWebpackPlugin.files.webpackManifest%> 注入捆绑文件。

webpack 配置：

const path = require('path')

// initialize version.js
require('child_process').exec('node ' + path.resolve('./../scripts/setAppVersion.js'), {cwd: '../'}, function (err, stdout, stderr) {
    console.log(err)
})

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        main: './src/main.js',
        loginPage: './src/components/loginPage/loginPage.js',
    },
    plugins: [
        new CleanWebpackPlugin(['dist'], {
            root: path.join(__dirname, '..'),
        }),
        new extractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true,
        }),
        new HtmlWebpackPlugin({
            template: './src/index.ejs',
            hash: true,
            // inject: false,
            chunks: ['main'],
        }),
        // generate Login Page
        new HtmlWebpackPlugin({
            // inject: false,
            template: './src/components/loginPage/index.ejs',
            hash: true,
            chunks: ['loginPage'],
            filename: 'loginPage.html',
        }),
    ],
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/',
    },
    module: {
        rules:[
            {
                test: /\.js$/,
                use: 'eslint-loader?{fix:true}',
                exclude: /node_modules/,
                enforce: 'pre',
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'file-loader?name=[name].[ext]',
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
            // TODO remove extractTextPlugin after delete all .scss in react-components
            {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!sass-loader',
                }),
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader?name=fonts/[name].[ext]',
            },
            {
                test: /\.(png|mp4)$/,
                use: 'file-loader',
            },
        ],
    },
    performance: {hints: false},
    optimization: {splitChunks: {chunks: 'all'}},
}

当我使用 chunks:['loginpage'] 时，我在 html 中只收到一个没有供应商的捆绑文件，如果我没有收到 main 入口点的捆绑包，则在 loginPage 入口点内。

【问题讨论】：

多个条目的目的是什么？您是否尝试进行代码拆分？
我有登录页面，我不需要来自主页的捆绑包。

标签： javascript webpack html-webpack-plugin webpack-4

【解决方案1】：

尝试将优化选项更改为

splitChunks: {
    chunks: "initial",
    name: 'commons'
}

然后调整HtmlWebpackPlugin选项如下

new HtmlWebpackPlugin({
        template: './src/index.ejs',
        hash: true,
        // inject: false,
        chunks: ['main','commons'],
    }),
    // generate Login Page
    new HtmlWebpackPlugin({
        // inject: false,
        template: './src/components/loginPage/index.ejs',
        hash: true,
        chunks: ['loginPage','commons'],
        filename: 'loginPage.html',
    }),

【讨论】：