Where there is sunshine, there is shadow, so where there is shadow, there must be sunshine

preface

1 chainWebpack chain operation

The config. Plugins plugin

Use Plug-ins

Plugin (name) // plugin(name) // plugin(name) // plugin(name) // plugin(name) // plugin(name) // plugin(name) // plugin(name) // Plugin ('povide').use(webpack.providePlugin, [options])Copy the code

Tap Change parameter

// htmlWebpackPlugin config.plugin(' HTML ').tap(args => {// New CDN resource import // Dynamic import link and script args[0].cdn = ProvidePlugin plugin('povide').use(webpack.provideplugin, [{_: 'lodash' }]) .tap(args => { console.log('povide', args) return args })Copy the code

The config. Resolve. Alias alias

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

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 }Copy the code

The options options

The node_modules module is introduced

{
  $: 'jquery'
}
Copy the code

SRC local import

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

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

SRC is locally imported

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

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

SRC Local alias is imported

Set ('test', path.resolve(__dirname, 'SRC /plugins/test.js'))) 'test' } console.log('Test', Test) // {add, sum, default: {add, sum}}Copy the code

3. Pay attention to

2. Export default export module. The object is {default} 3. Import paths must be resolved using path.resolve

The end of the

Look out the window, the moon is so beautiful, just like you back then, Mio

Good night ^_^

Refer to the link

  • Progressbar document
  • Progressbar official case
  • Some attributes of SVG

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage
  • Learn a vUE plugin (13) every day — HTML2Canvas
  • Learn a VUE plug-in (14) every day — vue-pull-to
  • So, how about a VUE plugin (15) every day — Vue-Content-Placeholder
  • Learn a vUE plugin every day (16) – VUe-video-player
  • Learn a vue plugin every day (17) — js-file-download
  • Learn a VUE plugin (18) every day — JS-Audio-Recorder
  • Learn a VUE plugin (19) every day – VUe-TreesELECT
  • Learn a VUE plug-in (20) — ProgressBar every day