每天学习一个vue插件(21)——ProvidePlugin

七秒记忆的鱼
714 阅读2分钟

有阳光的地方就会有阴影，所以有阴影的地方也一定会有阳光

前言

1 chainWebpack 链式操作

config.plugin 插件

use 使用插件

// config.plugin(name)
// 具名插件

// 具名插件html， 默认使用htmlWebpackPlugin
// 无需use
config.plugin('html')

// 具名插件povide，使用webpack.ProvidePlugin
// args必须为数组，options需要使用数组包裹
plugin('povide')
  .use(webpack.ProvidePlugin, [options])

tap 更改参数

// htmlWebpackPlugin
config.plugin('html').tap(args => {
  // 新增CDN资源引入
  // 在index.htm中动态引入link和script
  args[0].CDN = CDNSources
  
  // 必须返回args
  return args
})

// ProvidePlugin
plugin('povide')
  .use(webpack.ProvidePlugin, [{
    _: 'lodash'
  }])
  .tap(args => {
    console.log('povide', args)
    return args
  })

config.resolve.alias 别名

config.resolve.alias
  .set('@', path.resolve(__dirname, "src"))
  .set(
      'test',
      path.resolve(__dirname, 'src/plugins/test.js')
    )

2 ProvidePlugin

test.js

export const add = (x, y) => x + y
export const sum = (...args) => args.reduce((a, c) => a + c, 0)

export default { add, sum }

options 选项

node_modules 模块引入

{
  $: 'jquery'
}

src 本地引入

{
  Test: path.resolve(__dirname, 'src/plugins/test.js')
}

console.log('Test', Test)
// {add, sum, default: {add, sum}}

src 本地局部引入

{
  Add: [path.resolve('src/plugins/test.js'), 'add']
}

console.log('Add', Add)
// function add() {}

src 本地别名引入

// 设置别名
config.resolve.alias.set(
  'test',
  path.resolve(__dirname, 'src/plugins/test.js')
)

// 引入模块
{
  test: 'test'
}

console.log('Test', Test)
// {add, sum, default: {add, sum}}

3.注意

1.options外层必须包裹数组
2.export default导出模块，对象为 {default} 3.引入路径须使用 path.resolve解析

尾声

看，窗外的月亮真好看，就像那时候的你一样， 米奥~

晚安 ^_^

参考链接

往期回顾

avatar
文章
阅读
粉丝