與 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
});