如何在生产环境中禁用Webpack的热模块替换功能

Question

如何在生产环境中打包时删除所有HMR引用？

我的生产Webpack配置没有任何关于HMR的引用，但是在浏览器调试器中，客户端不断地向/__webpack_hmr发出xhr调用。

有人能解释一下吗？

-- 我的配置

var path = require('path');
var webpack = require('webpack');

module.exports = {
entry: [
      path.resolve(__dirname, 'master/jsx/App')
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: '/dist/',
        filename: 'app.bundle.js'
    },
    cache: false,
    devtool: 'sourcemap',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            }
        })
    ],
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/
        }, {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react'],
                compact: false
            }
        }, {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, {
            test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
            loader: 'url?prefix=font/&limit=10000'
        }]
    }
};

- lai tang

---

你在使用什么命令来运行你的Webpack构建？能否发布你的生产Webpack配置？ - Ambroos

嗨Ambros，gulp正在调用webpack。 - lai tang

Answer 1

取决于您如何设置配置。我有一个节点环境变量告诉我是否在生产模式下运行。如果不是生产环境，则在我的server.js中使用以下方法设置webpackDevMiddleware。

if (process.env.NODE_ENV !== 'production') {
    app.use(connectLiveReload());
    let config = require('./webpack.config'),
        compiler = webpack(config);

    app.use(webpackDevMiddleware(compiler, {
        noInfo:     true,
        publicPath: config.output.publicPath
    }));

    app.use(webpackHotMiddleware(compiler));
}

- kshreve

Answer 2

此外，您可能希望从前端控制中间件客户端的调用触发：

entry: [
    'webpack-hot-middleware/client',
    './src/index'
]

通过在webpack.config.js中使用process.env.NODE_ENV !== 'production'来控制输入。

请参考运行生产环境的webpack。

- adaxi

Answer 3

你可以尝试确保你打开的所有浏览器窗口都在使用更新的捆绑包。

我也遇到了同样的问题，但在我的情况下，我看到了服务器上的GET /__webpack_hmr调用，因为我让我的服务器打印了所有请求方法和路径。

结果，我发现我还有一个不同的浏览器窗口是我没有注意到的，它正在运行我的开发捆绑包；它正在发出这些请求。

- mountHouli

Answer 4

除了使用环境变量禁用代码外，我建议在构建时完全删除HMR代码，这也将最小化您的最终捆绑包和源映射。

可以使用https://www.npmjs.com/package/webpack-strip-block来实现。

- zeachco