Webpack高级配置

一.抽离css文件

1.通常本地(开发环境)写法：

module: {
    rules: [
        test: /\.css$/,
        //loader执行顺序从右到左
        loader: ['style-loader', 'css-loader', 'postcss-loader']
]
}

2.生产环境写法：

const MiniCssExtractPLugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.export = {
    module: {
        rules: [
            test: /\.css$/,
            loader: [
                MinCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader'   
]
]
},
    // 抽离css文件
    plugins: [
        new MinCssExtractPlugin({
            //定义成hash值最大程度命中缓存，提升加载速度
            filename: 'css/main.[contentHash：8].css'
})
],
    optimization: {
        //压缩css
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  }
}

二.抽离公共代码及第三方代码

1.生产环境：

module.exports = {
    module: {
        optimization: {
            //分割代码块
            splitChunks: {
                chunks: 'all',
                //缓存分组
                cacheGroups: {
                    //第三方模块
                    vendor: {
                        name: 'vendor',//chunk名称
                        priority: 1,//权限更高，优先抽离
                        test: /node_modules/,
                        minSize: 0,//公共模块的大小限制
                        minChunks: 1//公共模块最少复用过几次 },
                    //公共模块
                    common: {
                        name: 'common',//chunk名称
                        priority: 0,//优先级
                        minSize: 0,//公共模块的大小限制
                        minChunks: 2//公共模块最少复用过几次 
}                    
}
}
}
}

三.Webpack性能优化

1.优化打包构建速度

1)优化babel-loader

{
    test:/\.js$/,
    use: ['babel-loader?cacheDirectory'], //开启缓存
    include: path.resolve(__dirname, 'src'), //明确范围 
    //exclude: path.resolve(__dirname, 'node_modules') //排除范围
}

2)happyPack多进程打包

const HappyPack = require('happypack')

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['happypack/loader?id=babel'],
                include: srcPath
}
],
        plugins: [
            new HappyPack({
                id: 'babel',
                loaders: ['babel-loader?cacheDirectory']
})
]
}
}

3)ParallelUglifyPlugin 多进程压缩JS

plugins: [
            new ParallelUglifyPlugin({
                //传递给UglifyJS的参数
                //还是使用UglifyJS压缩，只不过帮助开启多进程
                uglifyJS: {
                    output: {
                        beautify: false,//最紧凑的输出
                        comments: false,//删除所有的注释
},
                    compress: {
                        drop_console: true,//删除所有的console语句，可以兼容ie浏览器
                        collapse_vars: true,//内嵌定义了，但是只用到了一次的变量
                        reduce_vars: true,//提取出出现多次但是没有定义成变量去引用的静态值
}
}
})
]

4) IgnorePlugin 忽略第三方包指定目录，让这些指定目录不要被打包进去

let Webpack = require('webpack');
plugins:[
        //moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
	new Webpack.IgnorePlugin(/\.\/locale/,/moment/)
]

5) noParse 不去解析属性值代表的库的依赖

{
    module: {
        //不去解析jquery中的依赖库
        noParse: /jquery/
}
}

2.优化产出代码

1）图片小于5KB，以base64格式产出

{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 5 * 1024,
            //打包到img目录下
            outputPath: '/img1'
}
}
}

2）bundle加hash值

output: {
        // filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
        filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
        path: path.join(__dirname, '..', 'dist'),
        // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },

3)mode：production

自动压缩代码；

Vue、React等会自动删掉调试代码（如开发环境的warning）；

启动Tree Shaking；

4）scope hosting：创建函数作用域更少，体积更小，可读性更好