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文件，而是用于静态内容，如图像和徽标 。 您的JS文件是按照预期在build/js/下生成的。 将您的HTML更新为

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

这应该按预期工作。