image.png
需求是界面需要做国际化要求兼容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>
