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"
    }
},

现在你的代码可以运行了。

Answer 2

您的问题似乎与您在 html 中需要构建的 js 文件的方式有关。

    output: {
        path: path.resolve('build/js/'),
        publicPath: '/public/assets/js/',
        filename: "[name].js"
    }

公共路径不是用于 JS 文件，而是用于static content like images and logos。您的 JS 文件按预期在build/js/ 下生成。将您的 html 更新为

<script src="./build/js/shared.js"></script>
<script src="./build/js/home.js"></script>

这应该可以按预期工作。