Webpack，新块以错误的路径加载答案

【问题标题】：Webpack, new chunk is loading in with wrong pathWebpack，新块以错误的路径加载
【发布时间】：2016-12-22 21:50:46
【问题描述】：

我正在尝试分块我的应用程序 - 尝试遵循 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 添加正确的路径？谢谢！

【问题讨论】：

标签： javascript webpack

【解决方案1】：

您应该为此 sn-p 更改 publicPath：

publicPath: "/"

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

【讨论】：

我有三个配置文件：Prod、Dev 和服务器。没有 publicPath 属性 prod config 或 base config。我应该在output 对象中添加一个吗？
写库的时候，把这个设置为dist目录的本地相对路径可以吗？例如config.output.publicPath = "./dist/";?这会干扰我图书馆的消费者吗？

【解决方案2】：

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

这两个参数有两种不同的用途。

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

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

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

【讨论】：

感谢您的回答。我无法让它正常工作。如果我设置publicPath，那么0.bundle.js 会正确加载，但CSS 中引用的图像和字体不会。如果我不设置它，那么 CSS 中的图像会加载，但不会加载异步 js 包。

【解决方案3】：

这是因为您引用了publicPath。所以它会尝试从publicPath 加载脚本，尽管该文件不存在。

删除publicPath可以解决错误

【讨论】：