15. webpack内置插件

所有的webpack内置插件都做为webpack静态属性存在,使用下面方式可以创建一个插件对象

const webpack=require('webpack');
new webpack.插件名(options)

DefinePlugin

全局常量定义插件,使用插件通常定义一些常量值,例如:

new webpack.DefinePlugin({
    PI:`Math.PI`, //PI=Math.PI
  VERSION:`"1.0.0"`,//VERSION="1.0.0"
  DOMAIN:JSON.stringfy('duyi.com')  //两种书写方式,`"duyi.ocom"`
})

这样一来,在源码中,我们就可以直接使用插件中提供的常量,当webpack编译的完成以后,会自动替换为常量的值

BannerPlugin

它可以为每个chunk生成的头部文件添加一行注释,一般用于添加作者,公司,版权等信息

new webpack.BannerPlugin({
    banner:`
  hash:[hash]
  chunkhash:[chunkhash]
  name:[name]
  autor:蓝瞳
  corporation:蓝瞳版权`
})

ProviderPlugin

自动加载模块,不必到处 import 或者 require,在所有的模块中都可以使用 $ 调用jquery方法,_调用lodash方法

new webpack.ProviderPlugin({
    $:'jquery',
  _:'lodash'
})

综合配置

const webpack = require('webpack');
module.exports = {
    mode: 'development',
    plugins: [
        new webpack.DefinePlugin({
            PI: `Math.PI`, //PI=Math.PI
            VERSION: `"1.0.0"`,//VERSION="1.0.0"
            DOMAIN: JSON.stringify('duyi.com')  //两种书写方式,`"duyi.ocom"`
        }),
        new webpack.BannerPlugin({
            banner: `
          hash:[hash]
          chunkhash:[chunkhash]
          name:[name]
          autor:蓝瞳
          corporation:蓝瞳版权`
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            _: 'lodash'
        })
    ],
}

代码

console.log('PI', PI, 'version', VERSION, 'DOMAIN', DOMAIN);
console.log('=================>')
console.log($('item'));
console.log(_.drop()[1, 2, 3], 2)