webpack基础插件

2019独角兽企业重金招聘Python工程师标准>>>

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中单独引入抽离出来的公共模块。
常见的使用场景：

1. 抽离多个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)
   })

2. 抽离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)
   })

3. 抽离子模块中的公共模块到父模块中，会增加首屏加载的时间

   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)
   })

4. 和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)
   })

转载于:https://my.oschina.net/sijinge/blog/900610