我根据官方文档用 webpack-dev-middleware 配合 express启动web服务器加载js文件404错误,用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', // 追踪错误和警告
devServer: { // 一个简单的服务器
contentBase: './dist' // 静态文件路径
},
plugins: [
new CleanWebpackPlugin(['dist']), // 构建前清理dist文件夹
new HtmlWebpackPlugin({ // 动态生成index.html插件
title: 'Ajax demo',
template: 'index.html', // 模板文件
inject: true // 模板注入
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/' // 服务器端路径
}
};
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');
});