在开发前端项目时,我们一般会选用 webpack-dev-server
作为开发服务器,例如:
// webpack.config.js
module.exports = {
// ...
devServer: {
static: './dist',
},
}
// package.json
{
"scripts": {
"serve": "webpack serve --open",
"build": "webpack"
},
}
但实际上 Webpack 还提供了 webpack-dev-middleware
,可以作为单独的 package 使用。这就意味着可以使用自定义的 Server 作为开发服务器。下面我们先安装 express
和 webpack-dev-middleware
:
$ yarn add express webpack-dev-middleware -D
下面需要调整一下 Webpack 配置,确保 middleware 能够正确启用:
// webpack.config.js
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
},
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
// 增加这个配置
publicPath: '/',
},
};
然后创建 server.js
,添加如下内容:
// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const app = express();
const compiler = webpack(config);
// 告知 express 使用 webpack-dev-middleware,
// 以及将 webpack.config.js 配置文件作为基础配置。
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
);
// 将文件 serve 到 port 3000。
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
在 package.json
中添加一个 npm script:
// package.json
{
"scripts": {
"start": "node server.js",
"serve": "webpack serve --open",
"build": "webpack"
},
}
然后运行下面的命令就能启动服务:
$ yarn start