主页 / 问题 / 658159
Accepted
kosiakMD
Asked:2020-04-25 15:11:07 +0000 UTC2020-04-25 15:11:07 +0000 UTC

Webpack 开发服务器和 404（未找到）

  • 772

你好，有一个问题：在一个有 React 的网站上，每个页面都有自己的 Entry Bundle File，绑定了几个 entry-ID，bundle 是通过 Webpack 收集的。我想启用“热重载”

...
var buildPath = __dirname + '/public/js/bundles';
module.exports = {
    context: path.join(__dirname, '/resources/scripts'),
    devtool: process.env.NODE_ENV === 'production' ? null : 'inline-source-map',
    entry: {
        ...entries...
        campaigns: [
            'webpack/hot/only-dev-server',
            'webpack-dev-server/client?http://localhost:8080',
            './appjs/campaigns/campaignsEntry.js',
        ]
    },
    output: {
        path: buildPath,
        publicPath: 'http://localhost:8080/',
        filename: process.env.NODE_ENV === 'production' ? '[name]-bundle-[chunkhash].js' : '[name]-bundle.js'
    },
    devServer: {
        hot: true,
        contentBase: buildPath,
        publicPath: 'http://localhost:8080',
        port: 8080,
        headers: { "Access-Control-Allow-Origin": "*" },
        lazy: false,
        stats: { colors: true }
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015-loose', 'react'],
                    plugins: ['transform-object-rest-spread', 'transform-class-properties']
                }
            }
        ]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
    ]
};
if (process.env.NODE_ENV === 'production') {
...
} else {
    module.exports.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    );
}

1）页面与服务器有连接

2）服务器监控更新并创建一个新的Bundle

3）但它不是在本地创建的，而是“虚拟地”创建的（据我正确理解说明）

4）服务器通知客户端新的Bundle和Hash

5）客户端试图获取该地址的Bundle，但是会收到如下错误raven.js:1074 GET http://localhost:8080/004e386432676c218bd0.hot-update.json 404 (Not Found)

6) 一件奇怪的事情——在控制台中它给出了两次（据我所知，在正常操作期间它应该只有 1 次）2 raven.js:80 [WDS] App updated. Recompiling...

7) 如果我转到该地址，http://localhost:8080/WebpackServer 会在项目文件夹（public/... - PHP Laravel 上的服务器）中提供由 Webpack“收集器”在本地制作的所有捆绑包的列表，WebpackServer 不会输入new Bundle with a hash 在那里，但也没有把它给这个地址

8) 网页包 --version=2.4.1

问题：我做错了什么？

谢谢！

webpack

2 个回答

  1. Best Answer

    这里有很多要点。让我们按顺序进行：

    1. 这个参数是什么意思publicPath: 'http://localhost:8080/'？所以你在 'localhost:8080' 上。此路径在 HTML 中替换为资源，如果您想从远程源链接资源，这很有意义。在这里你有足够的publicPath: '/'。
    2. devServer.contentBase这里通常不需要，它与output.path（如果我不明白某些东西是正确的）没有区别。这可能是您遇到问题的原因之一。
    3. 目前尚不清楚您的index.html. 它必须位于 中output.path，或者您必须以某种方式生成它，例如，通过html-webpack-plugin模板EJS。

    总的来说，问题似乎出在output.path. 它应该指向您的“WEB_ROOT”，可以这么说，而不是您放置捆绑包的地方。必须在文件名模板中指定包的路径：

    output: {
    path: path.resolve(__dirname + '/public'),
    publicPath: '/',
    filename: filename: process.env.NODE_ENV === 'production' ? 'js/bundles/[name]-bundle-[chunkhash].js' : 'js/bundles/[name]-bundle.js'
},

devServer: {
    publicPath: "/",
    contentBase: "./public",
    hot: true
}

    index.html，而正如我所说，组装后它应该在/build目录中。

    • 2

  2. 也许我的方法将是您的解决方案。您需要在外部 ip 上运行 webpack-dev-server。在这篇文章中描述。

    配置将如下所示：

    devServer: {
   hot: true,
   contentBase: resolve(__dirname, 'dist'),
   publicPath: '/',
   host: '192.168.3.186'
   port: 7373,
   proxy: {
      '/api/**': {
       target: '192.168.3.186:8000',
       secure: false,
       changeOrigin: true,
     }
   }
},
    • -1

相关问题