手写自己的『模板编译loader』

目录结构

 

 

mkdir tpl-loaders-creator
cd tpl-loaders-creator
npm init -y

yarn add webpack@4.44.2 webpack-cli@3.3.12 webpack-dev-server@3.11.2 -D

yarn add babel-loader @babel/core html-webpack-plugin@4.5.0 -D

webpack.config.js

const { resolve } = require('path'),
  htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: resolve(__dirname, 'src/main.js'),
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolveLoader: {
    modules: ['node_modules', resolve(__dirname, 'loaders')]
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.tpl$/i,
        use: [
          'babel-loader',
          {
            loader: 'tpl-loader',
            options: {
              log: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: resolve(__dirname, 'index.html')
    })
  ],
  devServer: {
    port: 3000
  }
}

src/main.js

import tpl from './info.tpl'

const app = document.getElementById('app')

const info = tpl({
  name: '云舒',
  age: 32,
  hobby: '钢琴,旅行'
})

app.innerHTML = info

src/info.tpl

<h1>{{name}}</h1>
<p>{{age}}</p>
<p>{{hobby}}</p>

/loaders/tpl-loader/index.js

const tplReplace = require('./utils')
const { getOptions } = require('loader-utils')  //获取loader的options参数

function tplLoader(source) {
  source = source.replace(/\s+/g, '').toString()
  // <h1>{{name}}</h1><p>{{age}}</p><p>{{hobby}}</p>  ${source}是这个变量  '${source}' 则是'<h1>{{name}}</h1><p>{{age}}</p><p>{{hobby}}</p>' 表示的是字符串  tplReplace是个方法 要调用toString()方法 
  // console.log('this>>>>',this)
  const { log } = getOptions(this) //获取该loader的options参数
  const _log = log ? `console.log('compiled the file which is from ${this.resourcePath}')` :''
  return `
  export default (options) => {
    ${tplReplace.toString()}
    ${_log}
    return tplReplace('${source}',options)
  }
  `
}

module.exports = tplLoader

loaders/tpl-loader/utils/index.js

// function tpl(options) {
  // function tplReplace(source, srcObj) {
  //   return source.replace(/\{\{(.*?)\}\}/g, (...args) => {
  //     return srcObj[args[1]]
  //   })
  // }
//   return tplReplace(`${source}`, options)
// }

function tplReplace(source, srcObj) {
  return source.replace(/\{\{(.*?)\}\}/g, (...args) => {
    return srcObj[args[1]]
  })
}
module.exports = tplReplace

浏览器运行结果：