express前端模板打包教程
Express是Node.js的一个Web应用程序框架，可以帮助我们快速搭建Web应用。
在使用Express的过程中，我们常常需要使用模板引擎来管理网页结构和内容，这篇文章将介绍如何使用webpack打包前端模板文件。
1. 安装webpack
```bash
npm install webpack --save-dev
```
2. 安装使用的模板引擎
```bash
npm install ejs --save
```
如果使用其他模板引擎，请按照该模板引擎的安装步骤安装。
3. 创建webpack配置文件
在根目录下创建`webpack.config.js`文件，内容如下：
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
},
module: {
rules: [
{
test: /\.ejs$/,
use: 'ejs-loader'
}
]
}
};
```
这里的配置中：
- `entry`指定了入口文件，可以是任意的JavaScript文件；
- `output`指定了输出文件的路径和文件名；
- `module`中的`rules`，是Webpack中处理各种文件的规则。
这里的规则是处理 `.ejs`文件，使用`ejs-loader`加载器进行处理。
4. 将页面模板文件放入src目录下
在`src`目录下创建一个`index.ejs`文件，并添加以下代码：
```html
<!doctype html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
```
这是一个简单的HTML页面，使用ejs模板引擎语法插入变量。
5. 创建入口文件index.js
在`src`目录下创建一个`index.js`文件，并添加以下代码：
```javascript
const ejs = require('ejs');
const fs = require('fs');
// 数据对象
const data = {
title: "Webpack EJS Demo",
message: "Hello Webpack and EJS!"
};
// 读取ejs模板文件
fs.readFile('./src/index.ejs', 'utf-8', function (err, template) {
if (err) throw err;
// 编译为HTML字符串
const html = ejs.render(template, data);
// 写入文件
fs.writeFile('./public/index.html', html, function (err) {
if (err) throw err;
console.log('Webpack EJS Demo build complete!');
})
});
```
这里使用`fs`模块读取模板文件，使用`ejs`模块编译模板文件并插入数据，最后将输出的HTML字符串写入到`public`目录下的`index.html`文件中。
6. 执行webpack打包命令
在命令行中执行以下命令：
```bash
npx webpack
```
这会自动查找webpack.config.js文件，并执行打包命令。
7. 查看输出文件
执行完打包命令后，我们可以在`public`目录下看到生成的
`index.html`和打包后的`bundle.js`文件，用任意浏览器打开`index.html`文件，看到页面上的变量已被正确替换。
到此，我们使用webpack成功地打包了前端模板文件，并将
它们输出到了public目录下。
你可以在这个基础上添加更多的模板文件和JavaScript代码，构建你的Express Web应用程序。