webpack + ejs开发

您所在的位置：网站首页 › 浏览器webpack › webpack + ejs开发

webpack + ejs开发

2023-07-06 06:10| 来源: 网络整理| 查看: 265

前言

由于项目原因需要用原生三件套最小化写产品的首页，实在受不了css和整一个html的写法，自己找了个解决方案，可以一套代码套不同的语言js，但目前还不是最完美的。

如果不想看我多bb，这里就先放项目地址了

依赖安装 # babel + ts yarn add @babel/core @babel/preset-env @babel/preset-typescript typescript -D # webpack yarn add webpack webpack-dev-server webpack-cli -D # loader yarn add babel-loader ejs-loader -D # webpack-plugin yarn add html-webpack-plugin -D webpack配置

这里只展示部分的dev配置，build自己去项目里找，我懒

webpack.dev.js

const path = require('path') const HTMLWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') module.exports = { entry: [ 'webpack/hot/dev-server', path.join(__dirname, './app.ejs'), path.join(__dirname, './main.ts'), ], target: 'web', mode: 'development', cache: { type: 'memory', }, devtool: 'cheap-module-source-map', output: { filename: 'app.js', path: path.join(__dirname, './dist'), publicPath: '/', }, module: { rules: [ { test: /\.[tj]s?$/, exclude: /node_modules/, use: ['babel-loader'], }, { test: /\.ejs$/, use: [ { loader: 'ejs-loader', options: { esModule: false, variable: 'data', }, }, ], }, ], }, devServer: { contentBase: path.join(__dirname, './dist'), compress: true, port: 9000, hot: true, }, resolve: { extensions: ['.ts', '.js', '.json'], }, context: path.resolve(__dirname), plugins: [ new webpack.DefinePlugin({ 'process.env.build_lang': `"${process.env.build_lang}"`, }), new HTMLWebpackPlugin({ template: path.join(__dirname, './app.ejs'), filename: 'index.html', }), new webpack.HotModuleReplacementPlugin(), ], }

这里ejs-loader的配置项variable是很关键的，会跟后面的引用ejs模块相关联

开发

main.ts随便怎样都行，重点只介绍ejs模块的

app.ejs

m1.ejs

在m1.ejs中传入的数据以object类型的data传入，跟webpack配置的variable的data是同一个的

结语

html-webpack-plugin本身就支持ejs，所以整了这个活。目前已知的缺陷为

引入的子ejs模块并不会触发热更新ejs的热更新为刷新整个页面

这个环境本身就是为解决一套代码多语言使用 + 易维护来随便弄弄的，有什么能改进的也欢迎提

【本文地址】

webpack + ejs开发

webpack + ejs开发

今日新闻

推荐新闻