webpack提供了很多有用的原生插件
UglifyJsPlugin new webpack.optimize.UglifyJsPlugin([options])
解析/压缩/美化所有的js chunk，传入options可以满足更多的定制化需求
sourceMap 生成SourceMap文件，会导致编译过程变慢，默认true
test/include/exclude 使用一个或多个正则表达式来过滤要处理的文件
mangle 通过设置except数组来防止指定变量被改变
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
})
ExtractTextPlugin var ExtractTextPlugin = require("extract-text-webpack-plugin");
该插件会提取entry chunk中所有的require('*.css')，分离出独立的css文件。
new ExtractTextPlugin([id: string], filename: string, [options])
一个entry生成一个文件，当多个entry的时候，可以用[name]/[id]/[contenthash]来生成多个文件
id 插件实例的唯一标识，自动生成
filename 输出的filename，可以通过[name]/[id]/[contenthash]自定义filename
options.allChunks 提取所有的chunk（默认只提取initial chunk）
options.disable disable该插件
ExtractTextPlugin.extract([notExtractLoader], loader, [options])
该方法将已经存在的loader转换成一个提取loader
notExtractLoader 不提取css时需要使用的loader
loader 用来将资源文件转换为css输出模块的loader
options.publicPath 覆盖loader的publicPath设置
let ExtractTextPlugin = require('extract-text-webpack-plugin');
// multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');
module.exports = {
...
module: {
loaders: [
{ test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) },
{ test: /\.less$/i, loader: extractLESS.extract(['css', 'less']) },
...
]
},
plugins: [
extractCSS,
extractLESS
]
};
DedupePlugin new webpack.optimize.DedupePlugin()
有些JS库有自己的依赖树，并且这些库可能有交叉的依赖，DedupePlugin可以找出他们并删除重复的依赖。
NoErrorsPlugin new webpack.NoErrorsPlugin()
跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
ProvidePlugin new webpack.ProvidePlugin(definitions)
definitions 定义标识符，当遇到指定标识符的时候，自动加载模块。
new webpack.ProvidePlugin({
$: "jquery"
})
// in a module
$("#item") // <= just works
// $ is automatically set to the exports of module "jquery"
CommonsChunkPlugin new webpack.optimize.CommonsChunkPlugin(options)
提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，以便在其他的入口和模块中使用。别忘了在html中单独引入抽离出来的公共模块。
常见的使用场景：
- 抽离多个entry的公共模块
new CommonsChunkPlugin({
name: "commons",
// (the commons chunk name)
filename: "commons.js",
// (the filename of the commons chunk)
// minChunks: 3,
// (Modules must be shared between 3 entries)
// chunks: ["pageA", "pageB"],
// (Only use these entries)
})
- 抽离vendor模块
entry: {
vendor: ["jquery", "other-lib"],
app: "./entry"
}
new CommonsChunkPlugin({
name: "vendor",
// filename: "vendor.js"
// (Give the chunk a different name)
minChunks: Infinity,
// (with more entries, this ensures that no other module
// goes into the vendor chunk)
})
- 抽离子模块中的公共模块到父模块中，会增加首屏加载的时间
new CommonsChunkPlugin({
// names: ["app", "subPageA"]
// (choose the chunks, or omit for all chunks)
children: true,
// (select all children of chosen chunks)
// minChunks: 3,
// (3 children must share the module before it's moved)
})
- 和3类似，不过不是抽离到父模块，而且额外抽离出一个异步的公共模块
new CommonsChunkPlugin({
// names: ["app", "subPageA"]
// (choose the chunks, or omit for all chunks)
children: true,
// (use all children of the chunk)
async: true,
// (create an async commons chunk)
// minChunks: 3,
// (3 children must share the module before it's separated)
})
