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添加正确的路径？谢谢!

Answer 1

您应该更改publicPath此代码段:

publicPath: "/"

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

Answer 2

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

有两个不同的目的,使用2个参数.

1. 输出:路径:保存入口部分中提到的捆绑文件的目录.例如,您提到的'entry'条目的bundle.js.在这种情况下,它将保存在webconfigfolder+"../../dist/client"文件夹中.
2. 输出:publicPath:从浏览器访问时添加用于引用模块的目录前缀.0.bundle.js是一个由代码拆分创建的未命名块.它将被放置在输出:上面提到的路径中,但将使用公共路径在您的html中引用.

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

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

Answer 3

这是因为您已经参考了publicPath. publicPath因此，尽管该文件不存在，但它会尝试从中加载脚本。

删除publicPath即可解决该错误