前言
webpack 提供了三种搭建开发环境的方式：
- webpack 监听模式
- webpack-dev-server
- webpack-dev-middleware
在大多数我们会选择使用 webpack-dev-server 来实现，因为它简单便捷。不过下面我们主要来讲讲第三种方式的具体实现细节。
webpack-dev-middleware 是什么？
webpack 开发中间件是一个包装器，用来将 webpack 处理的文件发送到服务器。这是在 webpack-dev-server 内部使用的，但是如果需要，它可以作为一个独立的包来支持更多自定义配置。下面我们来实现一个 koa2 和 webpack-dev-middleware 组合的服务器示例：
- 前置相关工作：
> mkdir webpack-demo1 // 创建实验目录
> npm init -y // 初始化为 npm 包，然后可以看到目录下有个 package.json 文件
> npm install webpack webpack-cli -D // 安装 webpack 相关，-D 即 --save-dev 的意思
新建 src 目录，添加 index.js 和 print.js 文件。
// index.js
import printMe from './print';
function component() {
const element = document.createElement('div');
element.innerHTML = "hello webpack";
const btn = document.createElement('button');
btn.innerHTML = 'click me';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
// print.js
export default function printMe() {
console.log('I get called from print.js!');
}
在项目下添加 webpack.config.js 文件
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development', // 设置 webpack 为开发模式（开发模式下打包出来的文件更大，方便开发调试）
entry: { // 两个入口，app 和 print
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
// 指定在浏览器中引用时输出目录的公共URL，例如打包出来 app.bundle.js，那么访问地址就是: localhost:3000/__bundle__/app.bundle.js。否则就会报 404 not found
publicPath: '/__bundle__/'
}
};
下面我们先输入 npx webpack，看看单单使用 webpack 能否打包成功。打包成功后，就会如下图，在 dist 目录下有两个打包好的 js 文件。
- koa2 + webpack-dev-middleware
接下来我们安装 koa ，koa-static， webpack-dev-middleware：
> npm install koa koa-static webpack-dev-middleware -D
新建 example 目录和 index.html 文件，目录 和 index.html 文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="/__bundle__/app.bundle.js"></script> <!-- 因为我们设置了 publicPath 为 /__bundle__/ -->
<script src="/__bundle__/print.bundle.js"></script>
</body>
</html>
在项目下新建 server.js 文件，内容如下:
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const Koa = require('koa');
const serve = require('koa-static');
const app = new Koa();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// 由于webpack-dev-middleware是一个标准的express中间件，在Koa中不能直接使用它，因此需要将webpack-dev-middleware封装一下，以便Koa能够直接使用。
const devMiddleware = (compiler, opts) => {
const middleware = webpackDevMiddleware(compiler, opts);
return async (ctx, next) => {
await middleware(ctx.req, {
// @ts-ignore
end: (content) => {
ctx.body = content
},
setHeader: (name, value) => {
ctx.set(name, value)
}
}, next)
}
};
app.use(devMiddleware(compiler, {
publicPath: config.output.publicPath
}));
// 服务的静态文件地址，所以打开 localhost:3000 访问的时候就会默认在该目录下找对应的 index.html 文件。如果没有配置该选项，访问会报 404。
app.use(serve(__dirname + '/example'));
app.listen(3000, () => {
console.log('Example app listening on port 3000!\n');
});
node server.js 启动或者在 package.json 添加脚本。成功启动后如下图：
然后在网页上访问 localhost:3000，可以看到对应的请求都是成功的。
接下来在 example 目录下添加 simple 目录以及在 simple 目录下添加 index.html，并修改 example 下的 index.html 文件内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul><li><a href="simple">simple</a></li></ul>
<script src="/__bundle__/app.bundle.js"></script>
<script src="/__bundle__/print.bundle.js"></script>
</body>
</html>
点击 simple 链接就会跳到对应的 index.html 页面。（静态资源服务器的知识，默认寻找该目录下的 index.html 文件）
参考：
webpack - using webpack-dev-middleware - 使用 webpack-dev-midleware 搭建开发服务器
output - outputPublicpath
koa-static - koa 静态资源服务中间件
网友评论