Webpack中压缩代码文件

Posted 2023-01-06 aiguangyuan

在开发完成后，代码正式上线都需要对代码进行压缩，这样代码资源会变的更小，访问速度也会变的更快。

1. 压缩JS文件

在Webpack 4.x以上版本以上内置了uglifyjs-webpack-plugin 插件，会对JS文件自动压缩，不需要做其它的任何操作。也可以手动安装这个插件，设置一些另外的参数，比如开启并行压缩，加快打包的速度。

2. 压缩CSS文件

由于 css-loader 在1.0版本以后，去掉了设置参数，所以在打包的时候是没有办法通过设置参数的方式去压缩。

1.安装插件

npm i optimize-css-assets-webpack-plugin cssnano -D

由于optimize-css-assets-webpack-plugin插件配置时依赖cssnano预处理器，所以需要一起安装。

2. 配置Webpack

'use strict';

const path = require('path');
// npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// npm i optimize-css-assets-webpack-plugin cssnano -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = 
    entry: 
        index: './src/index.js',
        search: './src/search.js'
    ,
    output: 
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
    ,
    mode: 'production',
    module: 
        rules: [
            
                test: /.js$/,
                use: 'babel-loader'
            ,
            
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            ,
            
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            ,
            
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    
                        loader: 'file-loader',
                        options: 
                            name: '[name]_[hash:8].[ext]'
                        
                    
                ]
            ,
            
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    
                        loader: 'file-loader',
                        options: 
                            name: '[name]_[hash:8][ext]'
                        
                    
                ]
            
        ]
    ,
    plugins: [
        new MiniCssExtractPlugin(
            filename: '[name]_[contenthash:8].css'
        ),
        // 开启CSS压缩
        new OptimizeCSSAssetsPlugin(
            assetNameRegExp: /\\.css$/g,
            cssProcessor: require('cssnano')
        )
    ]
;

3. 压缩html文件

1.安装插件

npm i html-webpack-plugin -D

2. 配置Webpack

'use strict';

const path = require('path');
// npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// npm i optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = 
    entry: 
        index: './src/index.js',
        search: './src/search.js'
    ,
    output: 
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
    ,
    mode: 'production',
    module: 
        rules: [
            
                test: /.js$/,
                use: 'babel-loader'
            ,
            
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            ,
            
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            ,
            
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    
                        loader: 'file-loader',
                        options: 
                            name: '[name]_[hash:8].[ext]'
                        
                    
                ]
            ,
            
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    
                        loader: 'file-loader',
                        options: 
                            name: '[name]_[hash:8][ext]'
                        
                    
                ]
            
        ]
    ,
    plugins: [
        // 提取单独的CSS文件
        new MiniCssExtractPlugin(
            filename: '[name]_[contenthash:8].css'
        ),
        // 开启CSS压缩
        new OptimizeCSSAssetsPlugin(
            assetNameRegExp: /\\.css$/g,
            cssProcessor: require('cssnano')
        ),
        // 压缩index.html文件
        new HtmlWebpackPlugin(
            template: path.join(__dirname, 'src/index.html'),
            filename: 'index.html',
            chunks: ['index'],
            inject: true,
            minify: 
                
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            
        ),

        // 压缩search.html文件
        new HtmlWebpackPlugin(
            template: path.join(__dirname, 'src/search.html'),
            filename: 'search.html',
            chunks: ['search'],
            inject: true,
            minify: 
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            
        )  
    ]
;