webpack插件& loader篇

插件

webpack入门中 列出了下面这些插件

plugins: [
        CopyWebpackPlugin...,
        webpack.ProvidePlugin...,
        webpack.optimize.DedupePlugin...,
        ExtractTextPlugin...,
        webpack.optimize.CommonsChunkPlugin,
        WebpackNotifierPlugin...,
        webpack.DllReferencePlugin...
    ],

本篇则对它们做一个介绍

插件分文webpack内置插件 和 要外部插件。

内置插件通过 webpack.xxx来使用
外部插件要npm install来安装require

CopyWebpackPlugin 拷贝资源插件

顾名思义 对资源文件进行拷贝黏贴

CopyWebpackPlugin([
        {
            from :'html',
            to:'html'
        },
        {
            context: 'global/img',
            from: '**/*',
            to:'img/common'
        },
        {
            from: 'img',
            to:'img'
        },
        {
            from :'global/lib/es5-shim-sham.js'
        }
])

from 定义要拷贝的源目录
to 定义要拷盘的目标目录
context 上下文
flatten 只拷贝文件不管文件夹 默认是false
ignore 忽略拷贝指定的文件 可以用模糊匹配
force 强制覆盖先前的插件 可选 默认false

webpack.ProvidePlugin 全局挂载插件

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

当模块使用这些变量的时候,wepback会自动加载 不用再去requre

webpack.NoErrorsPlugin

不显示错误插件

webpack.optimize.DedupePlugin

查找相等或近似的模块，避免在最终生成的文件中出现重复的模块

webpack.optimize.UglifyJsPlugin 丑化js 混淆代码

webpack.optimize.CommonsChunkPlugin 提取公共代码的插件

new webpack.optimize.CommonsChunkPlugin('common.js')

当你的 webpack 构建任务中有多个入口文件，而这些文件都 require 了相同的模块，如果你不做任何事情，webpack 会为每个入口文件引入一份相同的模块，显然这样做，会使得相同模块变化时，所有引入的 entry 都需要一次 rebuild，造成了性能的浪费，CommonsChunkPlugin 可以将相同的模块提取出来单独打包，进而减小 rebuild 时的性能消耗。

WebpackNotifierPlugin 编译完成后给一个Notifier提示

new WebpackNotifierPlugin({
    title: 'Webpack 编译成功',
    contentImage: path.resolve(process.cwd(), './global/img/logo.png'),
    alwaysNotify: true
}),

webpack.DllReferencePlugin

除了正在开发的源代码之外，通常还会引入很多第三方 NPM 包，这些包我们不会进行修改，但是仍然需要在每次 build 的过程中消耗构建性能，那有没有什么办法可以减少这些消耗呢？DLLPlugin 就是一个解决方案，他通过前置这些依赖包的构建，来提高真正的 build 和 rebuild 的构建效率。

具体在 webpack优化中讲

ExtractTextPlugin

独立出css样式

如果我们希望样式通过引入，而不是放在