webpack自定义loader--编译.tpl文件

最新推荐文章于 2023-06-30 07:11:00 发布

星雨668

最新推荐文章于 2023-06-30 07:11:00 发布

阅读量471

点赞数 2

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_42744920/article/details/125591796

版权

webpack 专栏收录该内容

9 篇文章

订阅专栏

一、初始化一个项目

1、npm 初始化

npm init -y

2、安装需要的依赖

package.json文件：

{
  "name": "webpack-plugin-test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "babel-loader": "^8.2.5",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

3、新建文件tpl-loader，info.tpl，主入口文件main.js，webpack配置文件 webpack.config.js
在这里插入图片描述

二、编写info.tpl和主入口文件main.js文件，配置webpack

//  info.tpl文件：

<div>
  <h1>{{ name }}</h1>
  <div>{{ age }}</div>
  <div>{{ sex }}</div>
</div>

//  main.js文件：

import tpl from './info.tpl';

const appDom = document.getElementById('app');

appDom.innerHTML = tpl({
  name: '张三',
  age: 19,
  sex: '男'
})


//  webpack.config.js文件：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode:'development',
  devtool: 'eval-cheap-module-source-map',
  // 一般开发环境配置
	// development devtool: 'eval-cheap-module-source-map',
	// 一般情况生产环境配置
	// production devtool: 'cheap-module-source-map',
  entry:'./src/main.js',
  output:{
    filename: 'bundle.js',
    path:resolve(__dirname,'./dist')
  },
  
  resolveLoader: {
    modules: [ 'node_modules',resolve(__dirname,'loaders')]
  },
  module: {
    rules: [
      {
        test: /\.tpl$/,
        use: [
          'babel-loader',
          {
            loader: 'tpl-loader',
            options: {
              log: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./public/index.html',
      filename: 'index.html',
      minify:false
    })
  ],
  devServer: {
    port: 9000
  }
}

三、自定义tpl-loader

// tpl-loader/index.js 文件：
function tpl(source){
  console.log(source);
  // 去掉所有空格
  source = source.replace(/\s+/g, '');
  return `
    export default (options) => {
      ${compilerDom.toString()}
      return compilerDom('${source}',options);
    }
  `
}

// 替换{{}}内部内容

function compilerDom(source,replaceObj){
  const result = source.replace(/\{\{(.*?)\}\}/g,function(node,key){
    return replaceObj[key]
  })
  return result
}


module.exports = tpl;