webpack 如何壓縮文件

本節咱們學習如何壓縮 webpack 中的文件。在實際應用中，爲了縮小打包後包的體積，咱們可能須要將 CSS 和 JS 文件進行壓縮，這須要用到 webpack 中的不一樣插件來實現。css

壓縮 CSS

在 webpack 中要壓縮 CSS 文件，須要用到 optimize-css-assets-webpack-plugin 插件，這個插件會在 webpack 構建過程當中搜索 CSS ，並優化 CSS。webpack

首先咱們須要安裝這個插件，命令以下所示：web

npm install optimize-css-assets-webpack-plugin --save-dev

執行命令後，會發現插件成功添加到了 package.json 文件中的 devDependencies 依賴中。正則表達式

這個插件在使用時能夠接受如下選項：npm

assetNameRegExp：一個正則表達式，指示應優化的資產的名稱。提供的正則表達式針對配置中ExtractTextPlugin 實例導出的文件的文件名運行，而不是源 CSS 文件的文件名。默認爲 /\.css$/g。
cssProcessor：用於優化 CSS 的 CSS 處理器，默認爲 cssnano 。這應該是一個遵循 cssnano.process接口的函數（接收 CSS 和 options 參數並返回一個Promise）。
cssProcessorOptions：傳遞給 cssProcessor 的選項，默認爲 {}。
canPrint：一個布爾值，指示插件是否能夠將消息打印到控制檯，默認爲 true。

示例：

而後咱們能夠在 webpack.config.js 配置文件中配置這個插件，注意一下，咱們以前在學習插件的時候就講到過，插件在使用以前須要先經過 require 引用。json

const  OptimizeCssAssetsPlugin  =  require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: {
        entry:'./index.js',
    },
    output: {
        path:__dirname + '/dist',
        filename:'./bundle.js'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:['style-loader','css-loader']
            }]
    },
    mode: 'production',
    plugins: [
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default', { discardComments: { removeAll: true },
                normalizeUnicode: false }],
            },
            canPrint: true
        })
    ]
}

壓縮 JS

若是咱們要在 webpack 中壓縮 JS ，可使用 uglifyjs-webpack-plugin 插件。uglifyjs-webpack-plugin 插件用來對 JS 文件進行壓縮，減少 JS 文件的大小，加速加載速度。由於這個插件會拖慢 webpack 的編譯速度，因此通常咱們在開發時會將其關閉，部署的時候再將其打開。緩存

在使用此插件時，一樣須要先進行安裝：函數

npm install uglifyjs-webpack-plugin --save-dev

uglifyjs-webpack-plugin 插件的選項有以下所示：學習

test：測試匹配文件，默認值爲 /\.js(\?.*)?$/i。測試
include：要包含的文件，默認值爲 undefined。
exclude：要排除的文件。
cache：啓用文件緩存。當 JS 沒有發生變化則不壓縮。
parallel：是否啓用並行壓縮。
sourceMap：是否啓用 sourceMap。

示例：

uglifyjs-webpack-plugin 插件的使用以下所示：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
    new UglifyJsPlugin({
            test: /\.js(\?.*)?$/i,  //測試匹配文件,
            include: /\/index.js/,  //包含哪些文件
            excluce: /\/excludes/,  //不包含哪些文件
            chunkFilter: (chunk) => {
                // `vendor` 模塊不壓縮
                if (chunk.name === 'vendor') {
                  return false;
                }
                return true;
            },
            cache: true, 
            parallel: true, 
            sourceMap:  true
     })
  ]
}

連接：https://www.9xkd.com/