webpack里plugin添加HotModuleReplacementPlugin提示Unresolve

Question

顶部 require('webpack')了
在编写react-hot-loader的demo种编辑器中提示

然后浏览器中提示

请问有人遇到过这种问题吗？这个HotModuleReplacementPlugin在webpack中没有暴露？

这是server.js

var webpack          = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config           = require('./webpack.config');

new WebpackDevServer(webpack(config), {
    publicPath        : config.output.publicPath,
    hot               : true,
    noInfo            : true,
    historyApiFallback: true
}).listen(8080, '127.0.0.1', function (err, res) {
    if (err) console.log(err);
    console.log('At 3000');
});

这是webpack.config.js

var webpack = require('webpack');
var path = require('path');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

var ASS = path.resolve(__dirname, 'assets');
var BUILD = path.resolve(__dirname, 'build');

module.exports = {
    entry: {
        app: ['webpack-dev-server/client?http://127.0.0.1:8080', 'webpack/hot/dev-server', './assets/main.js']
    },
    output: {
        path: BUILD,
        filename: '[name].js',
        publicPath: BUILD
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel-loader?presets=react&presets=es2015']
            }
        ]
    },
    plugins: [
        new OpenBrowserPlugin({ url: 'http://localhost:8080' })
    ]
};

Answer 1

警告用此不够准确，这里的意思是：“HotModuleReplacementPlugin不会生效”。

为什么不会生效呢？

那是因为你已经：

new WebpackDevServer(webpack(config), {
    publicPath        : config.output.publicPath,
    hot               : true,//注意这里，你已经开启了hot模式，她和你手动加载HotModuleReplacementPlugin是一个意思，所有你后面再手动加一个就没意义了
    noInfo            : true,
    historyApiFallback: true
}).listen(8080, '127.0.0.1', function (err, res) {
    if (err) console.log(err);
    console.log('At 3000');
});

解决方案很简单，去掉webpack.config.js里的插件引用就好了

补充：

其实entry不需要搞那么麻烦：

entry: {
        app: './assets/main.js'
    },

只要在把inline也启动起来就好了：

new WebpackDevServer(webpack(config), {
    publicPath        : config.output.publicPath,
    hot               : true,
    inline            : true,//启动inline
    noInfo            : true,
    historyApiFallback: true
}).listen(8080, '127.0.0.1', function (err, res) {
    if (err) console.log(err);
    console.log('At 3000');
});

注意修改webpack.config.js后，运行命令要停掉，重新运行的。

Answer 2

要么只在server那边开启hot，或者启动命令中--hot开启，不然要在config里配置devServer的hot为true和导入webpack加入插件