Webpack5文件压缩

Posted 2022-03-01 IT人.阿标

文章目录

• • • HTML压缩
    • CSS压缩
    • JS压缩
    • 常遇坑位介绍
    • • 我们在配置插件的时候有的是配置在`optimization.minimizer`中，有的是配置在`plugin`中，区别是什么？
      • 我们明明配置了`optimization.minimizer`为true ，但是为什么还是没有被压缩（无效）

html压缩

HtmlWebpackPlugin` 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

同事HtmlWebpackplugin也支持html文本压缩，通过配置参数来达到各种压缩配置。

安装插件：

npm i -D html-webpack-plugin

基本用法：配置webpack.config.js

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: [
        new HtmlWebpackPlugin(
            scriptLoading: module,
            //本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)
            template: path.join(__dirname, 'default_index.ejs'),
            filename: 'index.html',//filename: 'index.html'
            hash: false,
            inject: true,
            compile: true,
            favicon: false,//添加特定favicon路径到输出的html文档中
            minify: false,//使用html压缩
            cache: true,//true|fasle, 默认true； 如果为true表示在对应的thunk文件修改后就会emit文件
            showErrors: true,
            chunks: 'all',//允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中
            excludeChunks: [],//这个与chunks配置项正好相反，用来配置不允许注入的thunk。
            title: 'Webpack App',生成的html文档的标题
            xhtml: false
        ),
    ],
;

CSS压缩

webpack5在配置css压缩依赖于两个插件：

• mini-css-extract-plugin

  将css单独打包成一个文件的插件，它建立在新的 webpack v5 功能之上，需要 webpack 5 才能工作

• css-minimizer-webpack-plugin

  这个插件使用 cssnano 优化和压缩 CSS。

安装插件：

npm i -D mini-css-extract-plugin
npm i -D css-minimizer-webpack-plugin

基本用法：

module.exports = 
  module: 
    rules: [
      
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      ,
    ],
  ,
  optimization: 
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  ,
;

JS压缩

webpack4中内置了uglifyjs-webpack-plugin这个插件，在webpack5中则内置使用’terser-webpack-plugin’这个插件对代码进行压缩（本文主要介绍以webpack5为例）。

Webpack在生产模式默认开启这个插件，所以我们默认打包的js文件以及是压缩过的。当然我们也可以手动安装一下这个插件并且手动设置一个参数，去做一些并行压缩之类的事情；

基本用法：

在webpack5中，我们不需要手动安装terser-webpack-plugin，只需要配置optimization即可：

optimization: 
  minimize: true, // 可省略，默认最优配置：生产环境，压缩 true。开发环境，不压缩 false
  minimizer: [
      new TerserPlugin(
                test: /\\.js(\\?.*)?$/i,  //用来匹配需要压缩的文件。通常可以配置min.js来过滤一些已经压缩过的js文件避免重复压缩导致问题
                include: undefined, //正则表达式，匹配参与压缩的文件。
                exclude: undefined //正则表达式，匹配不需要压缩的文件
                parallel: true, //使用多进程并发运行以提高构建速度。 并发运行的默认数量： os.cpus().length - 1 。
                minify: false, //允许你自定义压缩函数。 默认情况下，插件使用 terser 库。 对于使用和测试未发布的版本或 fork 的代码很帮助。

        terserOptions: 
              toplevel: true, // 最高级别，删除无用代码
              ie8: true,
              safari10: true,
          
      )

常遇坑位介绍

1. 我们在配置插件的时候有的是配置在optimization.minimizer中，有的是配置在plugin中，区别是什么？

   配置在「plugins」中，webpack就会在启动时使用这个插件。而配置在 「optimization.minimizer」 中，就只会在「optimization.minimize」这个特性开启时使用。所以webpack推荐，像压缩类的插件，应该配置在「optimization.minimizer」数组中。以便于通过「optimization.minimize」统一控制。（生产环境会默认开启minimize）

2. 我们明明配置了optimization.minimizer为true ，但是为什么还是没有被压缩（无效）

   原因是webpack认为，如果配置了minimizer，就表示开发者在自定以压缩插件，无论是配置minimizer是TRUE还是FALSE，内部的JS压缩器就会被覆盖掉。所以这里还需要手动将它添加回来。webpack内部使用的JS压缩器是「terser-webpack-plugin」。

   只有没有显示配置minimizer情况下，默认才是true压缩的。