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')({
                                    browsers:['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 //保留幾位小數
                       }
                    }
                ]
            }
        ]
    }
}
複製代碼