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样式

如果我们希望样式通过<link>引入，而不是放在 <style>标签内呢，即使这样做会多一个请求。

这个时候我们就要配合插件一起使用啦。

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    // ...省略各种代码
    module: {
        loaders: [
            {test: /\.js$/, loader: "babel"},
            {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
        ]
    },
    plugins: [
        new ExtractTextPlugin("[name].css")
    ]
}

extract-text-webpack-plugin 提取样式插件

项目中没有使用

功能是将css放到index.html的body上面

栗子

    plugins: [
        new CopyWebpackPlugin([
                {
                    from :'html',
                    to:'html'
                },
                {
                    context: 'global/img',
                    from: '**/*',
                    to:'img/common'
                },
                {
                    from: 'img',
                    to:'img'
                },
                {
                    from :'global/lib/es5-shim-sham.js'
                },
                {
                    context :'global/lib/swfupload',
                    from: '**/*',
                    to:'swfupload'
                }
        ]),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            _: 'underscore',
            React: 'react',
            ReactDOM: 'react-dom'
        }),
        new webpack.optimize.DedupePlugin(),
        new WebpackNotifierPlugin({
            title: 'Webpack 编译成功',
            contentImage: path.resolve(process.cwd(), './global/img/logo.png'),
            alwaysNotify: true
        }),
        new ExtractTextPlugin("[name].css"),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            minChunks: Infinity
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./lib/manifest.json')
        }),
    ]

loader

loader 本身是一个javascript模块需要通过npm install 对应的loader

如

babel-loader ,
css-loader,
less-loader,
sass-loader,
file-loader,
html-loader,
url-loader,
style-loader,
json-loader

js

{
    test: /\.js[x]?$/,
    exclude: /(node_modules)|(global\/lib\/)/,
    include: '',
    loader: 'babel-loader'
}

遇到 .js 和 .jsx 后缀的用 babel-loader来解析
跳过exclude中的文件。
包含include中的文件

css等

style-loader 会将css代码打入html的style标签里
css-loader 会生成一个css文件

在栗子中，我们用了 ExtractTextPlugin.extract 插件

ExtractTextPlugin的extract方法有两个参数，第一个参数是经过编译后通过style-loader单独提取出文件来，而第二个参数就是用来编译代码的loader。

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues')
},{
    test: /\.rcss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&sourceMap&-convertValues!sass-loader?sourceMap')
}, {
    test: /\.less$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues!less-loader')
}, {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues!sass-loader?sourceMap')
}

css-loader!xxx-loader 表示先执行xxx-loader再css-loader

.rcss中加了一个 modules 参数代表开启 css modules

-convertValues 是为了解决css压缩有的一个坑。 css 压缩有会把 px 转化为 pc pt

详见 https://github.com/camsong/blog/issues/5?utm_source=tuicool&utm_medium=referral

图片loader 包括各种其他文件

{
    test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
    loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
}

输出 name_ + 7位base64编码 + 后缀

json文件

{
 test: /\.json$/,
 loader: "json"
}

栗子

module: {
        loaders: [{
            test: /\.js[x]?$/,
            exclude: /(node_modules)|(global\/lib\/)/,
            loader: 'babel-loader'
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues')
        },{
            test: /\.rcss$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&sourceMap&-convertValues!sass-loader?sourceMap')
        }, {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues!less-loader')
        }, {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues!sass-loader?sourceMap')
        }, {
            test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
            loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
        }, {
            test: /\.html/,
            loader: "html-loader?" + JSON.stringify({
                minimize: false,
                attrs:false
            })
        },
            {
             test: /\.json$/,
             loader: "json"
            }
        ]
    }