HotModuleReplacementPlugin和react-hot-loader都失败

时间:2017-03-24 05:50:50

标签: webpack webpack-2 react-hot-loader hot-module-replacement

我一直在想着解决我遇到的这些webpack.config.js问题的解决方案。在entry属性中,它表示无法找到定义的目录;我试图预先添加./node_modules/,因为这些包位于node_modules文件夹中,但它仍然失败。在plugins属性中,它表示:

  

new webpack.HotModuleReplacementPlugin不是构造函数

我尝试删除webpack,但它说:

  

未定义HotModuleReplacementPlugin


webpack.config.js:

var webpack = require('webpack');
var path = require('path');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    path.join(__dirname, 'main/components/src')
  ],
  devtool: 'inline-source-map',
  output: {
    path: path.join(__dirname, 'main/components/build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015', 'react']
            }
          }
        ],
        exclude: '/node_modules/'
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'main/components/src'),
    inline: true,
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.HtmlWebpackPlugin({
      title: 'React App',
      filename: './main/index.html',
      inject: 'body'
    }),
    new webpack.UglifyJsPlugin(),
  ]
}

我非常感谢任何可以帮助我解决这些问题的人的答案。

0 个答案:

没有答案