Webpack，新块正在以错误的路径加载

Question

我正在尝试分块我的应用程序 - 尝试遵循 webpacks 指南的操作方法 ( https://webpack.github.io/docs/code-splitting.html )。所以我为我的应用程序设置了一个单独的块，我可以看到 webpack 正在生成 1.bundle.js 在我的构建文件夹中，但是它将它粘贴到我的 index.html 路径不正确，在我的控制台中，我看到了 1.bundle.js 文件的提取错误。

所以我的 webpack 配置看起来像这样（我现在只使用 webpack:dev）：

  return {
    dev: {
        entry: {
            index: './client/app.jsx'
        },
        output: {
            path: path.join(__dirname, '..', '..', 'dist', 'client'),
            publicPath: "/dist/client/",
            filename: 'bundle.js'
        },
        module: {
            loaders: [{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }, {
                test: /\.json$/,
                loader: 'json-loader'
            }]
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        },
        resolveLoader: {
            fallback: [path.join(__dirname, 'node_modules')]
        },
        plugins: [
            new webpack.DefinePlugin({
                "process.env": {
                    "NODE_ENV": JSON.stringify("dev")
                }
            })
        ]
    },

在我的 index.html 中，我手动添加了 <script src="bundle.js"></script> 并且效果很好。看起来现在构建时，webpack 正在我的索引上应用它自己的脚本标签，就像这样

  <script type="text/javascript" charset="utf-8" async="" src="/dist/client/1.bundle.js"></script>

但是这个路径是不正确的，它应该只是 src="1.bundle.js" 。我试过调整路径和 publicPath 但似乎没有任何效果。有没有办法让 webpack 添加正确的路径？谢谢！

原文由 ajmajmajma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该更改 publicPath 此代码段：

 publicPath: "/"

它将始终从根路径为您的块提供服务。

原文由 Everettss 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

即使它已得到回答和接受，我也会为其他有类似问题的人提供额外的有用信息。

使用这两个参数有两个不同的目的。

1. Output:path : 入口部分提到的包文件保存到的目录。例如，您提到的“条目”条目的 bundle.js。在这种情况下，它将保存在 webconfigfolder+"../../dist/client" 文件夹中。
2. 输出： publicPath： 从浏览器访问时添加以引用模块的目录前缀。 0.bundle.js 是通过代码拆分创建的未命名块。它将放置在上面提到的 output:path 中，但将使用公共路径在您的 html 中引用。

因此，如果您的文件在这种情况下存储在 /dist/client 文件夹中，但 index.htm 服务于 /dist/client ，您应该将公共路径指定为 ./. 如果 htm 是从 /dist 提供的，公共路径应该给出 ./client/.

公共路径对于为从浏览器动态调用的异步加载创建的块很有用。

原文由 Kannan J 发布，翻译遵循 CC BY-SA 3.0 许可协议