Webpack，新的代码块加载路径错误。

Question

我正在尝试对我的应用程序进行分块处理 - 试图遵循webpack的指南（https://webpack.github.io/docs/code-splitting.html）。因此，我为我的应用程序设置了一个单独的块，并且我可以看到webpack正在生成build文件夹中的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构建时，它自己也在我的index文件中加入了一个script标签，大概是这样的：

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

然而，该路径是不正确的，应该只是src="1.bundle.js"。我已经尝试了调整路径和publicPath，但似乎没有起作用。是否有办法让webpack添加正确的路径？谢谢！

- ajmajmajma

Answer 1

对于这个代码片段，您应该更改publicPath：

publicPath: "/"

它将始终从根路径为您服务。

- Everettss

---

我有三个配置文件：Prod、Dev和Server。在 Prod 配置或基本配置中没有 publicPath 属性。我应该在 output 对象中添加一个吗？ - Meet Zaveri

编写库时，将此设置为相对于“dist”目录的本地相对路径是否可以？例如：config.output.publicPath = "./dist/";？这会干扰我的库的使用者吗？ - tonix

Answer 2

尽管该问题已有答案并被接受，我为了帮助其他遇到类似问题的人提供额外有用的信息。

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

1. 输出：路径(path) - entry部分中所提到的捆绑文件(bundle files)保存的目录。例如，您提到的'entry'入口的bundle.js文件。在这种情况下，它将保存在webconfigfolder+"../../dist/client"文件夹中。

2. 输出：公共路径(publicPath) - 添加到从浏览器访问模块时引用模块的目录前缀。0.bundle.js是通过代码拆分(code splitting)创建的未命名块。它将放置在上述输出路径(output:path)中，但在html中使用公共路径(public path)进行引用。

因此，如果您的文件（如本例）存储在/dist/client文件夹中，但index.htm是从/dist/client提供的，则应将公共路径(public path)设置为./. 如果htm是从/dist提供的，则应将公共路径(public path)设置为./client/. 公共路径(public path)对于动态从浏览器加载的异步加载(async loading)生成的块(chunk)非常有用。

- Kannan J

---

谢谢您的回答。我无法使其正常工作。如果我设置了publicPath，那么0.bundle.js可以正确加载，但是CSS中引用的图像和字体则不能。如果我不设置它，则CSS中的图像可以加载，但异步js捆绑包则不能。 - JonathanPeel

Answer 3

这是因为你已经给出了publicPath的引用。因此，它将尝试从这个publicPath加载脚本，尽管文件在那里不存在。删除publicPath可以解决错误。

- brk