参考资料

使用

安装

npm install ejs-loader

列一下我的目录。

project
- src
  - pages
    - common
      - header.ejs
    - example
      - index.ejs

我的 webpack.config.js 的配置如下

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

module.exports = {
    resolve: {
        alias: {
            src: path.resolve(__dirname, 'src'),
            '@pages': path.resolve(__dirname, 'src/pages')
        }
    },
    entry: {
        example: './src/pages/example/index.js',
        ...
    },
    ...
    module: {
        rules: [
        	...
            {
                test: /\.ejs$/,
                use: [
                    {
                        loader: 'ejs-loader',
                        options: {
                            esModule: false,
                            variable: 'data',
                        },
                    },
                ],
            },
        ]
    },
    plugins: [
        ...
        new HtmlWebpackPlugin(
            {
                template: './src/pages/example/index.ejs',
                filename: "example.html",
                chunks: ['example'],
            }
        ),
    ]
}

其中

header.ejs 如下

1	都是 html 代码，没啥好写的

example.ejs 的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ejs</title>
</head>
<body>
<%= require('@pages/common/public/header.ejs')() %>
...

</body>
</html>

ejs 有跟多好用的用法，比如传递参数，但是，目前我没用到，所以，暂时不写了。

webpack + ejs开发