webpack 常用插件

webpack插件分为两种，一种是内置插件，即亲儿子，不需要安装和引用可直接使用，另一种是第三方插件，需要npm安装，require引用后才可使用。

常用内置插件

UglifyJsPlugin new webpack.optimize.UglifyJsPlugin([options])

解析/压缩/美化所有的js chunk，传入 options 可以满足更多的定制化需求。

compress 压缩配置项，查看配置项 。
sourceMap是否生成SourceMap文件，在配置devtool后有效，会导致编译过程变慢，默认true。
mangle通过设置except数组来防止指定变量被改变。

new webpack.optimize.UglifyJsPlugin({
 mangle: {
 except: ['$super', '$', 'exports', 'require']
 }
 })

beautify（boolean）美化压缩代码。
test, include, exclude (RegExp|Array)用一个或多个正则表达式来过滤要处理的文件。

new webpack.optimize.UglifyJsPlugin({
 test: /.js($|?)/i
 })

DedupePlugin new webpack.optimize.DedupePlugin()

有些JS库有自己的依赖树，并且这些库可能有交叉的依赖，DedupePlugin可以找出他们并删除重复的依赖。

NoEmitOnErrorsPlugin new webpack.NoEmitOnErrorsPlugin()

跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。

ProvidePlugin new webpack.ProvidePlugin(definitions)

definitions定义标识符，当遇到指定标识符的时候，自动加载模块，在下面例子中，无需在module中引入jquery，即可使用$方法。

new webpack.ProvidePlugin({
 $: "jquery"
 })
 // in a module
 $("#item")
 

CommonsChunkPlugin new webpack.optimize.CommonsChunkPlugin(options)

提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，以便在其他的入口和模块中使用。别忘了在html中单独引入抽离出来的公共模块。
常见的使用场景：

1. 抽离多个entry的公共模块
   

   new webpack.optimize.CommonsChunkPlugin({
    name: "commons",
    filename: "commons.js",
    })
    
   
    entry: {
    page1: './src/js/entry.js',
    page2: './src/js/entry.js'
    }
    

2. 抽离vendor模块
   

   
    new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    minChunks: Infinity
    })
    
   
    entry: {
    vendor: ["jquery", "other-lib"],
    app: "./entry"
    }
    

3. 抽离子模块中的公共模块到父模块中，会增加首屏加载的时间（不建议使用）

   new webpack.optimize.CommonsChunkPlugin({
    children: true,
    })

4. 和3类似，不过不是抽离到父模块，而且额外抽离出一个异步的公共模块

   new webpack.optimize.CommonsChunkPlugin({
    children: true,
    async: true
    })

第三方插件

ExtractTextPlugin var ExtractTextPlugin = require("extract-text-webpack-plugin");

首先安装插件，插件版本需要和webpack版本对应，我用的都是2.+的版本，版本不一致可能会报错。

npm install --save-dev [email protected]

该插件会提取entry chunk中所有的require('*.css')，分离出独立的css文件。

new ExtractTextPlugin([id: string], filename: string, [options])

id插件实例的唯一标识，自动生成
filename输出的filename，可以通过[name]/[id]/[contenthash]自定义filename
options.allChunks提取所有的chunk（默认只提取initial chunk）
options.disabledisable该插件

extract

ExtractTextPlugin.extract(options: loader | object)

options.loader(required)配置把资源转换成css的loader
options.fallbackLoader当css不被提取的时候被使用

var ExtractTextPlugin = require("extract-text-webpack-plugin");
 module.exports = {
 //插件项
 plugins: [
 new ExtractTextPlugin({
 filename: "style/[name].css?[hash]-[chunkhash]-[contenthash]-[name]",
 disable: false,
 allChunks: false
 })
 ],
 module: {
 loaders: [
 { test: /.css$/, loader: ExtractTextPlugin.extract({
 fallbackLoader: 'style-loader',
 loader: 'css-loader!autoprefixer-loader?{browsers:["last 2 version", "> 1%"]}'
 })
 }
 ]
 }
 }
 

不同版本可能写法不一样查看。