常用Loader和Plugin

一、Loader

css

• style-loader：把css样式插入html文件中
• less-loader
• sass-loader
• minicss.loader:来自mini-css-extract-plugin包，是把css打包成独立的文件

postcss-loader

• autoprefixer:处理样式兼容问题，原来需要结合browserlist指定支持的版本，现在配置Autoprefixer属性，可以直接配置
• cssnano:对css代码进行压缩
• px2rem-loader:px单位转换为rem

图片

• file-loader
• url-loader:和file-loader类似，可以设定大小，小于指定大小的，会打包成base64放在js文件

校验测试

• eslint-loader:校验eslint规范

js编译

• babel-loader:用于解析JavaScirpt文件，babel有丰富的预设和插件。可以将高级语法(主要是ECMAScirpt 2015+)编译成浏览器支持的低版本语法

{
    "presets": [...],
    "plugins": [...]
}

// babel.config.js
module.exports = (api) => {
    return {
        presets: [
            '@babel/preset-react',
            [
                '@babel/preset-env', {
                    useBuiltIns: 'usage',
                    corejs: '2',
                    targets: {
                        chrome: '58',
                        ie: '10'
                    }
                }
            ]
        ],
        plugins: [
            '@babel/plugin-transform-react-jsx',
            '@babel/plugin-proposal-class-properties'
        ]
    };
};

缓存

• cache-loader:使用在一些性能开销较大的loader之前
• babel-loader的cacheDirectory

多进程打包

• HappyPack:利用多进程
• thread-loader:官方推荐。这个loader后面的loaders被放在一个单独的进程池(worker pool)中

优化压缩时间

• uglifyJSPlugin:已经不再推荐，并且不支持es6
• terser-webpack-plugin:地址,terser是uglify-es的一个分支。利用多进程

二、Plugin

• speed-measure-webpack-plugin:用于运行时优化，分析每个loader、plugin使用了多少时间
• clean-webpack-plugin:清空打包目录
• html-webpack-plugin:生成html文件
• HappyPack:提高编译速度，已不用
• webpack.HotModuleReplaceMent:HMR
• webpack-bundle-analyzer:打包输出的bundle文件分析
• webpack.ProvidePlugin: 为了避免重复引用

// webpack.config.js配置
module.exports = {
    // ...
    plugins: [
        new webpack.ProvidePlugin({
            "_": "loadsh"
        })
    ]
}

// 项目代码文件引用
_.cloneDeep();

// .eslintrc.js配置
{
    globals: {
        _: "readonly" // 或者true
    }
}