Webpack常用的压缩，CSS，JS，图片

最新推荐文章于 2024-01-30 11:31:32 发布

不见浅诗～

最新推荐文章于 2024-01-30 11:31:32 发布

阅读量506

点赞数 1

分类专栏： WebPack 文章标签： webpack

本文链接：https://blog.csdn.net/EcbJS/article/details/115051015

版权

WebPack 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本篇文章参考以下博文

文章目录

前言

针对现在常用的 webpack 压缩方法进行一下总结，方便自己后续使用和查看。

JavaScript压缩

terser-webpack-plugin

这个方法是 webpack4 官方推荐的方法。采用多进程的方式进行压缩。

npm install terser-webpack-plugin --save-dev

optimization: {
	minimize: true,
	minimizer: [
		new TerserPlugin({
			terserOptions: {
				ecma: 5,
				warnings: false,
				parse: {},
				compress: {},
				mangle: true, 
				module: false,
				output: null,
				toplevel: false,
				nameCache: null,
				ie8: false,
				keep_fnames: false,
				safari10: true
			}
		})
	]
}

CSS 压缩

Optimize css Assets webpack Plugin

这部分压缩首先需要把 css 抽离出单独文件，需要用到 mini-css-extract-plugin 插件，去掉 style-loader ，具体配置如下：

//loader配置
{ 
	test: /\.css$/,
	 use:[
	     MiniCssExtractPlugin.loader,//loader取代style.loader,作用，提取js中的css文件
	     'css-loader',
	      {
	          loader:'postcss-loader',
	          options: {
	          	publicPath: '../',
	          },
       	  }
	 ],   
 }
//插件配置
new MiniCssExtractPlugin({
     filename: 'src/main.css', //输出的文件名字
 }),

对于css文件，必须要做的兼容处理，这里用到的是 postcss postcss-loader postcss-preset-env

npm postcss postcss-loader postcss-preset-env

webpack.config.js 配置如下：


 { 
	test: /\.css$/,
	use:[
	    MiniCssExtractPlugin.loader,//loader取代style.loader,作用，提取js中的css文件
	     'css-loader',
	     //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
	      {
	          loader:'postcss-loader',
	          options:{
	             postcssOptions: {
	                 plugins: [
	                           [ require('postcss-preset-env')() ],
	                      ]
	                }
	             }
	       }
	],     
}

package.json 配置如下：

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "nop op_mini all"
    ]
}

最后添加 css 压缩插件。


var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  //...
  plugins: [
  	new MiniCssExtractPlugin({
     filename: 'src/main.css', //输出的文件名字
	}),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
      canPrint: true
    })
  ]
};

图片压缩

image webpack loader

首先需要两个加载器插件：这两个插件作用是把 css 中的图片提取到指定目录。

npm install url-loader --save-dev
npm install file-loader --save-dev

module:{
    rules:[
        {
	        test:/\.(png|jpg|jpeg|gif)$/,
	        use:[
	            {
	               loader:'url-loader',
	                options:{
	                   name:'[name][hash:5].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀
	                   limit:100000,//限制图片大小 <= 100kb 进行base64编码（小于100kb打包进js文件）
	                    outputPath:'image'//设置输出文件夹名称，这个文件夹会与主入口文件在同一路径下
	                }
	            }
	        ]
        }
   ]
}

然后对抽离的图片进行压缩。

npm install image-webpack-loader --save-dev

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options:{
       name:'[name][hash:5].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀
       limit:100000,//限制图片大小 <= 100kb 进行base64编码（小于100kb打包进js文件）
        outputPath:'image'//设置输出文件夹名称，这个文件夹会与主入口文件在同一路径下
    },
    {
      loader: 'image-webpack-loader',// 压缩图片
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}