需求是界面需要做国际化要求兼容ie8 刚开始的处理方式是js获取语言参数后把对应的语言插入到节点中节点默认是空的没有默认的语言这样导致页面会有一瞬间是空白的之后优化界面拆分开每个语言对应一个界面 ejs就能通过配置实现一个模板编译出不同的语言界面

首先yarn init初始化package.json 然后安装需要用到的插件

{
  "name": "ejs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "ejs": "^3.1.5",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.10.1",
    "webpack-bundle-analyzer": "^4.2.0",
    "webpack-cli": "^4.2.0"
  }
}

配置webpack.config.js

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    entry: {
      main: './index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录
        filename: '[name].bundle.js', // 代码打包后的文件名
        publicPath: './', // 引用的路径或者 CDN 地址
        chunkFilename: '[name].js' // 代码拆分后的文件名
    },
    module: {
        rules: [{
          test: /\.html$/,
          use: [{
            loader: 'html-loader'
          }]
        }]
    },
    plugins: [
        new CleanWebpackPlugin(), // 会删除上次构建的文件，然后重新构建
        new HtmlWebpackPlugin({
          // 打包输出HTML
          title: '自动生成 HTML',
          minify: {
            // 压缩 HTML 文件
            removeComments: true, // 移除 HTML 中的注释
            collapseWhitespace: true, // 删除空白符与换行符
            minifyCSS: true // 压缩内联 css
          },
          filename: 'index.html', // 生成后的文件名
          template: path.resolve(__dirname, 'index.ejs'), // 根据此模版生成 HTML 文件
          chunks: ['main'] // entry中的 main 入口才会被打包
        })
    ]
}

创建ejs的文件 <%=htmlWebpackPlugin.options.title%>读取HtmlWebpackPlugin配置的信息

<!DOCTYPE html>
<html lang="en">
    <% var data={
        title : "测试",
         
    }%>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ejs測試</title>
</head>
<body>
    <h1><%=data.title%></h1>
</body>
</html>

执行yan build就会打包输出对应的html文件啦

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ejs測試</title>
</head>

<body>
    <h1>测试</h1>
    <script src="./main.bundle.js"></script>
</body>

</html>