webpack之css/js/html文件的压缩

最新推荐文章于 2024-03-20 09:39:31 发布

Strawberry96

最新推荐文章于 2024-03-20 09:39:31 发布

阅读量2.9k

点赞数 2

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/zhangying1996/article/details/126620720

版权

文件压缩分三种类型js，css，html。

1、JS文件的压缩：

uglifyjs-webpack-plugin

webpack4以上已经内置了js的压缩插件uglifyjs-webpack-plugin，如要修改插件的配置还是要下载之后再修改，默认打包之后已压缩js代码。

terser-webpack-plugin

webpack5及以上已经内置了js的压缩插件terser-webpack-plugin，如要修改插件的配置还是要下载之后再修改，默认打包之后已压缩js代码。

TerserWebpackPlugin | webpack 中文文档

2、CSS文件的压缩

使用optimize-css-assets-webpack-plugin，同时使用cssnano

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

//webpack.config.js

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

module.exports = {

        plugins:[
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.css$/g,
                cssProcessor: require('cssnano')
            })
        ]
}

CssMinimizerWebpackPlugin

这个插件使用 cssnano 优化和压缩 CSS。就像 optimize-css-assets-webpack-plugin 一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。

CssMinimizerWebpackPlugin | webpack 中文文档

3、HTML压缩

使用html-webpcak-plugin

npm install --save-dev html-webpack-plugin   //安装

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [

        // 如果有两个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
            }
        }),
        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
            }
        })
    ],
};