与 webpack-dev-server 一起使用

通过 npm 安装 webpack-dev-server 。

npm i -D webpack-dev-server

通过添加 server.js 配置 webpack-dev-server 。

// server.js

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

var server = new WebpackDevServer(webpack(config), {
    // ...
});

server.listen(8080);

修改 webpack.config.js

• 将 webpack-dev-server/client 添加到 entry 中定义的每个项目。

• 将 webpack/hot/only-dev-server 添加到 entry 中定义的每个项目。

  • 注意： 如果需要改变……
  • 如果 HMR 失败，请使用 webpack/hot/only-dev-server 阻止页面刷新。
  • 如果 HMR 失败，请使用 webpack/hot/dev-server 自动刷新页面。

• 将 new webpack.HotModuleReplacementPlugin() 添加到 plugins

  module.exports = {
      entry: {
          js: [
              'webpack-dev-server/client?http://localhost:8080'
              'webpack/hot/only-dev-server',
              './index.js'
          ]
      },
      plugins: [
          new webpack.HotModuleReplacementPlugin()
      ]
  };
  

在 webpack-dev-server 配置中添加 hot: true

var server = new WebpackDevServer(webpack(config), {
    hot: true

    // ... other configs
});