webpack4自定义loader

webpack4自定义loader

1.在node_modules文件夹中创建test-loader文件夹，内部在创建index.js，内容如下

//node_modules/test-loader/index.js
module.exports = function(source){
  
  return source.replace(/test/, 'test123'); 
}

2.vue.config.js文件中

//  webpack 配置，键值对象时会合并配置，为方法时会改写配置
    configureWebpack: config => {
    
        config.module.rules.push({
          test: /test\.js$/,
          use:[{
              loader:'test-loader'
          }]
        })

    },

3.页面中引入test.js

// 工具函数
import { func } from './test'

created() {
    console.log(func) // 打印func方法
}

test.js内容

let func = function () {
  console.log('test')
}

export {
  func
}

4.执行指令

npm run serve

5.输出对比

alt text

alt text

alt text