這裡用到中介軟體webpack-dev-middleware，用來監測原始檔的變化並自動編譯；
注意官網對其描述的這一點：
- No files are written to disk, rather it handles files in memory（不將輸出檔案寫到磁碟，而是在記憶體中處理，因此使用之後可能會出現看不到dist目錄的情況，視配置而異）
同時用到 node.js的 express模組，用於作為伺服器

一、安裝webpack-dev-middleware

npm install webpack-dev-middleware --save-dev
 


//這裡需要注意下webpack版本要與之匹配，否則就是一系列的錯誤
//安裝特定版本的webpack-dev-middleware
npm install webpack-dev-middleware@<version> --save-dev

二、express伺服器

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware'
 
);

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    index:"index.html"
 

}));

// Serve the files on port 3000.
app.listen(3000, function () {
    console.log('Example app listening on port 3000!\n');
});

三、配置檔案中增加如下程式碼

output: {
     //多檔案輸出
     filename: '[name]_[chunkhash:8].js',// 給輸出的檔名稱加上 Hash 值
     // 輸出檔案都放到 dist 目錄下
     path: distDir,
     publicPath: '/'//增加這行程式碼+++++
 }

四、pakage.json中配置執行指令碼

"scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "dev": "node dev.js" //增加這行程式碼+++++
  }

五、執行

npm run dev