webpack + ejs开发

最新推荐文章于 2024-06-21 09:41:28 发布

apades

最新推荐文章于 2024-06-21 09:41:28 发布

阅读量2.2k

点赞数 1

分类专栏： webpack ts ejs 文章标签： webpack

本文链接：https://blog.csdn.net/qq_41535611/article/details/113111505

版权

webpack 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

ejs

1 篇文章 0 订阅

订阅专栏

前言

由于项目原因需要用原生三件套最小化写产品的首页，实在受不了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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="layout-container <%= process.env.build_lang %>">
        <%= require('./m1.ejs')({a1:'asd'}) %>
    </div>
</body>
</html>

m1.ejs

<div class="m1">
    <p>a:<%= data.a1 %></p>
</div>

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

结语

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

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

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

apades

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack + ejs开发

前言由于项目原因需要用原生三件套最小化写产品的首页，实在受不了css和整一个html的写法，自己找了个解决方案，可以一套代码套不同的语言js，但目前还不是最完美的。如果不想看我多bb，这里就先放项目地址了依赖安装# babel + tsyarn add @babel/core @babel/preset-env @babel/preset-typescript typescript -D# webpackyarn add webpack webpack-dev-server webpack-
复制链接

扫一扫

专栏目录