Question

我在反应项目中使用webpack hot module replacement。配置如下所示。

let compilerConfig = {
    entry: [
        'babel-polyfill', 
        'webpack-dev-server/client?http://0.0.0.0:9000/',
        'webpack/hot/only-dev-server',
        path.join(ws.srcDir, 'client', 'src', 'index.js'),

    ],
    devtool: 'source-map',
    output: {
        path: path.resolve(ws.srcDir, 'public'),
        filename: 'main.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(?:p|s)?css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: { config: { path: path.join(__dirname, "postcss.config.js") } }
                        },
                    ],
                }),
            },
            {
                test: /\.(png|woff|woff2|eot|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader',
            },
            {
                test: /\.(js|jsx)?$/,
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'node_modules', 'astro'),
                ],
                loader: 'babel-loader',
                options: {
                    babelrc: false,
                    presets: [
                        'react',
                        'es2015',
                        'stage-2'
                    ]
                },
            },
            {
                test: /\.svg$/i,
                use: [
                    {
                        loader: "babel-loader",

                    },
                    {
                        loader: "svg-react-loader",
                        query: {
                            classIdPrefix: '[name]-[hash:8]__',
                            propsMap: {
                                fillRule: 'fill-rule',
                                foo: 'bar'
                            },
                            xmlnsTest: /^xmlns.*$/
                        }
                    }
                ],
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': `"${NODE_ENV}"`,
        }),
        new ExtractTextPlugin('styles.css'),
        new HTMLWebpackPlugin({
            template: path.join(ws.srcDir, 'client', 'src', "index.html"),
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
};


const serverConfig = {
    contentBase: path.resolve(ws.srcDir, 'client', 'src'),
    port: process.env.PORT || '9000',
    inline: true,
    host: '0.0.0.0',
    historyApiFallback: true,
    stats: {
        colors: true,
    },
    headers: {
        'Access-Control-Allow-Origin': '*'
      },
};

我正在通过gulp启动webpack dev服务器，如下所示。

gulp.task('webpack-dev', function() {

    WebpackDevServer.addDevServerEntrypoints(compilerConfig, serverConfig);
    const webpackConf = webpack(compilerConfig);
    new WebpackDevServer(webpackConf, serverConfig)
        .listen('9000', '0.0.0.0', function(err) {
            if (err)
                throw new Error("webpack-dev-server", err);
            // Server listening
            console.info("[webpack-dev-server]", "http://localhost:9000");
        })


})

一段时间后出现[WDS] Disconnected!错误。而且我也没有看到[WDS] Hot Module Replacement enabled.登录控制台。

当我进行代码更改时，webpack会重新编译，但不会在浏览器中反映出来。

使用以下版本。

webpack = 2.3.x
webpack-dev-server = 2.4.x

Answer 1

发现了问题。我正在index.html中加载脚本。失败了（404）。这导致热模块更换失败。

Webpack热模块更换卡在[HMR]等待来自WDS的更新信号

1 个答案: