我根據(jù)官方文檔用 webpack-dev-middleware 配合 express啟動(dòng)web服務(wù)器加載js文件404錯(cuò)誤，用webpack-dev-server是可以的。

webpack.config.js文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    hello: './src/index.js'
  },
  devtool: 'inline-source-map', // 追蹤錯(cuò)誤和警告
  devServer: { // 一個(gè)簡單的服務(wù)器
    contentBase: './dist' // 靜態(tài)文件路徑
  },
  plugins: [
    new CleanWebpackPlugin(['dist']), // 構(gòu)建前清理dist文件夾
    new HtmlWebpackPlugin({ // 動(dòng)態(tài)生成index.html插件
      title: 'Ajax demo',
      template: 'index.html', // 模板文件
      inject: true // 模板注入
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 服務(wù)器端路徑
  }
};

server.js,就是官方文檔中的代碼:

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

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