性能优化-内置插件

webpack的插件都是通过npm去安装的，这种是使用外部插件；webpack本身也是有插件的，是通过new webpack.**来实现的

new webpack.DllReferencePlugin（执行引导文件）和new webpack.DllPlugin（设置引导文件）这两个是内置插件

1>  DefinePlugin设置全局变量-内置插件

webpack.config.js文件

  plugins: [
    // html文件
    new HtmlWebpackPlugin({
      // 模板路径
      template: "./src/index.html",
    }),
      new webpack.DefinePlugin({
        "A": 100
      })
  
  ],

DefinePlugin内部接收一个对象，内部是全局的配置信息

index.js文件

console.log(A,'全局A')

此时全局配置是有一些独特规定的

如果是基本类型值，支持数字、布尔值

如果是字符串，比如要多包裹一层字符串

引用类型也是支持的，但是内部如果是字符串，必须也要多包裹一次，也可以使用JSON.stringify整体包裹

    new webpack.DefinePlugin({
      "A": 100, // 数字类型
      "B": { "aa": "'aa'", "bb": 11 },
      "C": ["'cc'", 22],
      "D": "'hello'",
      "E": true,
      "F": JSON.stringify({a: 'aa',b:'bb'})
 })

 

 

 2>  ProvidePlugin 设置全局加载模块

如果使用插件比较频繁，此时设置全局的进入会比较合理，这样每一个模块不用再单独进行引入

webpack.config.js文件

new webpack.ProvidePlugin({
    $: "jquery"
})

$就是替换符，后面的参数就是库，此时就表示用$来代替jquery，可以在全局任意位置使用

index.js文件

console.log($,"jquery")

 

 

 

 3> BannerPlugin chunk注释

new webpack.BannerPlugin("keyeking")

所有的chunk模块顶部都会有这样的注释，通常都是用于版权说明