webpack基础（二）

一，设置文件指纹

什么是文件指纹？文件指纹就是打包后输出文件的后缀，每次文件更改打包后，后缀都会修改，这样可以防止浏览器的默认缓存，使客户端代码可以及时修改。

文件指纹的三种方式：Hash：和整个项⽬目的构建相关，只要项⽬目⽂文件有修改，整个项⽬目构建的 hash 值就会更更改；Chunkhash：和 webpack 打包的 chunk 有关，不不同的 entry 会⽣生成不不同的 chunkhash 值；Contenthash：根据⽂文件内容来定义 hash ，⽂文件内容不不变，则 contenthash 不不变。

1，设置js的文件指纹：修改webpack的output设置

module.exports = {
    output:{
        filename:'[name]_[chunkhash:8].js',
        path:path.join(__dirname,'dist')
    }
}

2,设置css的文件指纹：使用MiniCssExtractPlugin插件,首先安装npm install mini-css-extract-plugin -D,然后修改webpack配置。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    ...
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'[name]_[contenthash:8].css'
        })
    ]
}

3,图片的文件指纹：

[name]:文件名称，[ext]:文件后缀名,[path]:文件相对路径，[hash]:文件内容的hash

修改相应的webpack配置：

module.exports = {
    ...
    module:{
        rules:[
            {
                test:/\.(png|jpg|svg|gif|jpeg)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        name:'img/[name]_[hash:8].[ext]',
                        limit:10240
                    }
                }
            }
        ]
    }
}

至此webpack打包文件指纹设置完成。

二，代码压缩

1，js压缩：webpack内置了uglifyjs-webpack-plugin插件，只有设置mode:production时，webpack自动打开该功能，自动压缩js文件代码。

2，css文件压缩：使用optimize-css-assets-webpack-plugin插件，同时使用cssnano插件，对css进行压缩。

首先安装插件：npm install optimize-css-assets-webpack-plugin cssnano -D。

然后修改webpack配置

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    ...
    plugins:[
        new OptimizeCssAssetsWebpackPlugin({
            assetNameRegExp:/\.css$/g,
            cssProcessor:require('cssnano')
        })
    ]
}

3,html文件压缩：修改html-webpack-plugin插件配置，设置压缩参数

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'src/index.html'),
            filename:'index.html',
            injuct:true,
            minify:{
                html5:true,
                collapseWhitespace:true,
                preserveLineBreaks:false,
                minifyCSS:true,
                minifyJS:true,
                removeComments:false
            }
        })
    ]
}

三，自动清理构建目录

webpack每次构建的时候不会自动清理目录，造成构建的输出目录 output 文件越来越多，避免构建前每次都手动删除dist文件夹。

使用clean-webpack-plugin插件，默认会删除output指定的输出目录：npm install clean-webpack-plugin -D。 修改webpack配置

const { CleanWebpackPlugin } = require(clean-webpack-plugin);
module.exports = {
    ...
    plugins:[
        new CleanWebpackPlugin()
    ]
}

四，自动添加css前缀

使用postcss-loader结合autoprefixer插件实现自动补齐css前缀。

安装插件：npm install postcss-loader autoprefixer -D;

修改webpack配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    ...
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            plugins:() => [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            }
        ]
    }
}

然后再修改package.json配置，增加：

"browserslist":[
    "last 2 version",
    "> 1%",
    "ios 7"
]

五，px自动转rem

移动端布局时，使用px2rem-loader将px自动转化为rem，使页面根据屏幕的大小实现自适应。

安装loader:npm install px2rem-loader -D;

修改webpack配置:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            plugins:() => [
                                require('autoprefixer')({
                                    browsers:['last 2 version', '>1%' , 'ios 7']
                                })
                            ]
                        }
                    },
                    {
                       loader:'px2rem-loader',
                       options:{
                           remUnit:75, //1rem等于多少px
                           remPrecision:8 //保留几位小数
                       }
                    }
                ]
            }
        ]
    }
}