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 文件及其内容，但正在执行其中的 none 代码。每个文件当前都有一个未被记录的控制台日志。但我已经尝试添加调试器并写入页面，但仍然没有任何结果。

Answer 1

您的问题似乎与您在 html.

中要求构建 js 文件的方式有关

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

public 路径不是用于 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>

这应该会按预期工作。

Answer 2

您假设共享块将被称为 "shared.js"，这是错误的。

将您的配置修改为：

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

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

Webpack 拆分块未被执行

Webpack split chunks aren't being executed

javascript

webpack

webpack-dev-server