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>

这应该可以正常工作。

Webpack拆分块未执行

2 个答案: