未执行 Webpack 拆分块

Question

我创建了一个 webpack 配置，它具有三个入口点，我试图在捆绑时拆分这些入口点。下面是我的webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    mode: "development",
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
    context: path.resolve('js'),
    entry: {
        about: './about_page.js',
        home: './home_page.js',
        contact: './contact_page.js'
    },
    output: {
        path: path.resolve('build/js/'),
        publicPath: '/public/assets/js/',
        filename: "[name].js"
    },
    devServer: {
        contentBase: 'public'
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                    configFile: ".eslint.json"
                }
            },
            {
                test: /\.es6$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.es6']
    },
    watch: true
}

我在我的 HTML 中包含了以下脚本（其中home.js替换为其他相关文件名）。我收到一个shared.js不存在的错误。

<script src="/public/assets/js/shared.js"></script>
<script src="/public/assets/js/home.js"></script>

在 chrome 中检查我的页面时，我能够看到各个 javascript 文件及其内容，但没有执行其中的任何代码。每个文件当前都有一个控制台日志，其中没有被记录。但我已经尝试添加调试器并写入页面，但仍然没有命中。

Answer 1

您认为共享块将被称为“shared.js”，这是错误的。

将您的配置修改为：

optimization: {
    splitChunks: {
        chunks: "all",
        name: "shared"
    }
},

现在你的代码就可以工作了。