Question

我一直在尝试使用Webpack-Dev-Server配置Webpack 2热模块替换。

webpack.config.js如下：

  const path = require('path');
  const Webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');

  const HotModuleReplacement = new Webpack.HotModuleReplacementPlugin();
  const NamedModulesPlugin = new Webpack.NamedModulesPlugin();
  const NoEmitOnErrorsPlugin = new Webpack.NoEmitOnErrorsPlugin();

  const extractCSS = new ExtractTextPlugin('main.css');
  const extractSCSS = new ExtractTextPlugin('styles.css');

  const config = {
      entry: [
          'webpack-dev-server/client?http://localhost:8080',
          // bundle the client for webpack-dev-server
          // and connect to the provided endpoint
         'webpack/hot/only-dev-server',
         // bundle the client for hot reloading
         // only- means to only hot reload for successful updates
         './src/index.js',
      ],
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'bundle.js',
          publicPath: 'http://localhost:8080/',
          hotUpdateChunkFilename: 'hot/hot-update.js',
          hotUpdateMainFilename: 'hot/hot-update.json',
      },
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: [
                      path.resolve(__dirname, 'node_modules'),
                  ],
                  loader: 'babel-loader',
                  options: {
                      presets: ['react', 'es2015', 'stage-2'],
                  },
              },
              {
                  test: /\.scss$/,
                  loader: extractSCSS.extract({
                      fallback: 'style-loader',
                      use: ['css-loader', 'postcss-loader', 'sass-loader'],
                  }),
              },
              {
                  test: /\.css$/,
                  loader: extractCSS.extract({
                      fallback: 'style-loader',
                      use: ['css-loader', 'postcss-loader'],
                  }),
              },
          ],
      },
      plugins: [
          extractCSS,
          extractSCSS,
          HotModuleReplacement,
          NamedModulesPlugin,
          NoEmitOnErrorsPlugin,
      ],

      devtool: 'source-map',
      devServer: {
          publicPath: 'http://localhost:8080/',
          contentBase: './',
          inline: true,
          hot: true,
          historyApiFallback: true,
          stats: {
              colors: true,
          },
      },
   };

   module.exports = config;

我有这个文件夹结构：

/
/src
/src/index.js
/src/index.scss

我认为我需要在index.js中使用HMR API，如此：

import MockComponent from './MockComponent/MockComponent';

export default class App {
    constructor() {
        this.mock = new MockComponent();
    }
    render() {
        return `<div class="element">${this.mock.render()}</div>`;
    }
}

let app = {};
app = new App();
const mainDiv = document.querySelector('#root');
mainDiv.innerHTML = app.render();

// Hot Module Replacement API
if (module.hot) {
    module.hot.accept();
}

问题在于，当我在控制台中对代码进行更改时，我得到了：

然后HMR似乎没有对渲染进行任何改变。

有人可以帮我解决这个问题吗？

非常感谢

Answer 1

问题似乎是您在开发模式下没有disable ExtractTextPlugin。在不停用的情况下，您传递的fallback加载程序将无法运行，在这种情况下为style-loader，ExtractTextPlugin不支持HMR本身。

在生产中，您不希望禁用ExtractTextPlugin，因此一种方法是使用一个配置将使用--env标志。请注意，通常建议使用单独的配置，一个用于生产，一个用于开发，尽管您可以使用webpack-merge之类的工具来共享公共位。

因此，在 package.json 中，您需要更新脚本，然后将配置更改为函数，以便它可以接受env对象作为参数。

<强>的package.json

{
  ...
  scripts: {
    "start": "webpack-dev-server --env.dev",
    "build": "webpack"
  },
  ...
}

<强> webpack.config.js

...

const config = (env = {}) => ({
  ...
  plugins: [
    new ExtractTextPlugin({
      filename: 'styles.css',
      disable: env.dev === true
    })
  ]
})

为了简洁，我在这里排除了很多，但这应该给你一个很好的主意。请参阅下面的我正在使用的版本......

extract-text-webpack-plugin@2.1.0
style-loader@0.14.0
webpack@2.2.1
webpack-dev-server@2.4.2

需要注意的是，虽然您可以在hot: true中使用devServer并在new HotModuleReplacementPlugin()中使用plugins启用HMR，但还需要其他加载程序和配置更改才能生成“直播“在浏览器中更改不同类型的代码......这里有一些想到的内容：

Style Loader：正如您已经使用的那样
React Hot Loader：反应组件的实时重新加载
Vue Loader：用于实时重新加载vue组件

Answer 2

这已经解决了（请参阅此回购https://github.com/andrixb/WebpackSassStarter）：

在webpack.config.js HtmlWebpackPlugin中添加了以下配置：

new HtmlWebpackPlugin({ title: 'FE Build Setup', hash: true, template: './src/index.html', }),
在src文件夹内移动了外面的index.html并移除了静态脚本和链接标记（index.html现在只用作模板）
从webpack.config.js移除在entry

'webpack-dev-server/client? http://localhost:8080', // bundle the client for webpack-dev-server // and connect to the provided endpoint 'webpack/hot/only-dev-server', // bundle the client for hot reloading // only- means to only hot reload for successful updates

和output：

publicPath: 'http://localhost:8080/', hotUpdateChunkFilename: 'hot/hot-update.js', hotUpdateMainFilename: 'hot/hot-update.json',
按照 @Skip Jack

webpack.config.js

ExtractTextPlugin

在devServer

webpack.config.js

Webpack热模块替换不会注入更新的代码

2 个答案: