性能优化-内置插件
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模块顶部都会有这样的注释,通常都是用于版权说明