webpack5以上版本 使用optimize-css-assets-webpack-plugin压缩问题

Posted 2023-05-09

参考技术A optimize-css-assets-webpack-plugin无法实现压缩css，打包过程中会出现

[DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)

这是因为optimize-css-assets-webpack-plugin 在webpack5中已不在友好支持

解决办法 使用 css-minimizer-webpack-plugin 为webpack5支持版

 optimization: 

    minimize: true,

    minimizer: [

         new CssMinimizerPlugin(),

    ],

webpack基础知识

一、基础

1 安装

npm i -g webpack webpack-cli

// 推荐安装至本地
npm i -D webpack webpack-cli

2 webpck基础使用

2.1 webpack-cli

Npm 5.2以上的版本中提供了一个npx命令

npx想要解决的主要问题、就是调用项目内部安装的模块、即就是在node_modules下的.bin目录中找到对应的命令执行

使用webpack命令: npx webpack

Webpack4.0之后可以实现0配置打包构建、0配置的特点就是限制较多、无法自定义很多配置

开发过程中还是使用webpack配置进行打包构建

2.2 webpack配置

Webpack 四大核心概念

• 入口entry — 程序的入口js
• 输出 output — 打包后存放的位置
• 加载器loader — 用于对模块的源代码进行转换
• 插件plugins — 解决loader无法解决的问题

基本配置

1. 配置 webpack.comfig.js
2. 运行 npx webpack

// 运行默认webpack.config.js文件 
npx webpack
npx webpack webpack.config.js

// 运行自定义配置文件
npx webpack --config webpack.custom.config.js

//package.json 配置
"dev": "webpack --config webpack.custom.config.js",
"dev1": "npx webpack --config webpack.custom.config.js", // npx 可省略、会自动在node_modules里面找
"dev2": "webpack"

const path = require('path')

module.exports = 
  entry: './src/index.js',
  output: 
    path: path.join(__dirname, 'dist'),
    filename:'bundle.js'
  ,
  mode: 'development'

2.3 自动编译工具配置

每次要编译代码时，需要运行npm run dev比较烦，webpack提供了几个选项、可以自动编译

1. webpack watch mode
2. webpack-dev-server
3. webpack-dev-middleware

多数场景中、推荐使用webpack-dev-server

2.3.1 watch

在webpack指令后面加上--watch参数即可

主要的作用就是监视本地项目文件的变化、发现有修改的代码就会自动编译打包、生成输出文件

• 通过cli的方式设置watch参数

1. 配置package.json

   "watch": "webpack --watch"

2. 运行 npm run watch

• 通过配置文件对watch的参数进行修改

const path = require('path')

module.exports = 
  mode: 'development',
  entry: './src/index.js',
  output: 
    path: path.join(__dirname, 'dist'),
    filename:'bundle.js'
  ,
  // 开启监视模式、此时执行webpack指令进行打包会监视文件变化自动打包
  watch: true

2.3.2webpack-dev-server (重点)

• 简单配置

1. 安装devServer

   安装devServer需要依赖webpack、必须在项目依赖中安装webpack

   npm i -D webpack-dev-server

2. index.html中

   <script src='/bundle.js'></script>

3. 运行

   npx webpack-dev-server

4. 运行

   npx webpack-dev-server --hot --open --port 9527

5. 配置package.json

   "dev": "webpack-dev-server  --contentBase src --compress --hot --open --port 9527"
   
   // --contentBase src 是以src为根目录， 否则以项目为根目录
   // --open 自动打开
   // --port 端口号
   // --hot 热模块更新
   // --compress 利用express开启gzip压缩

6. 运行

   npm run dev

devServer 会在内存中生成一个大包好的bundle.js， 专供开发时使用，打包效率高，修改代码后会自动打包重新打包以及刷新浏览器

• 修改webpack.config.js

const path = require('path')

module.exports = 
  mode: 'development',
  entry: './src/index.js',
  output: 
    path: path.join(__dirname, 'dist'),
    filename:'bundle.js'
  ,
  // 将cli中的参数 在配置文件中进行配置
  devServer:
    hot:true,
    open: true,
    port:9527,
    compress: true,
    contentBase:'./src'
  

2.3.3 html插件

1. 安装 html-webpack-plugin 插件

   npm i -D html-webpack-plugin

2. 在 webpack.config.js 中 plugins 节点下配置

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   plugins:[
    new HtmlWebpackplugin(
        filename: 'index.html', // 生产的文件名称
        template: './src/index.html' // 将此目录下的文件作为模板生成一个新的html、放置在根目录的内存中
    )
   ]

   1. devServer时、根据模板在express项目根目录下生成html文件、类似于devServer生成内存中的bundle.js
   2. devServer时、自动引入 bundle.js
   3. 打包时会自动生成index.html

2.3.4 webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper)、它可以把webpack处理后的文件传递给一个服务器(server)、webpack-dev-server 在内部使用了它、同时、它可以作为一个单独的包来使用、以便进行更多自定义设置来实现更多的需求

1. 安装express 和 webpack-dev-middleware

   npm i -D express webpack-dev-middleware

2. 新建 server.js

   const express = require('express')
   const webpack = require('webpack')
   const webpackDevMiddleware = require('webpack-dev-middleware')
   const config = require('./webpack.config')
   
   const app = express()
   const compiler = webpack(config)
   
   app.use(webpackDevMiddleware(compiler, 
     publicPath:'/'
   ))
   
   app.listen(3333, function () 
     console.log('port:3333');
   )

   如果要使用middleware、必须使用html-webpack-plugin插件、否则html文件无法正确的输出到express服务器的根目录

2.3.5 总结

只有在开发时才需要使用自动编译工具

项目上线时都会直接使用webpack进行打包构建、不需要使用这些自动编译工具

自动编译工具只是为了提高开发体验

2.4处理CSS

1. 安装 css-loader style-loader

   npm i -D css-loader style-loader

2. 配置web pack

   module:
    rules:[
        // 配置的是用来解析.css文件的loader，css-loader、style-loader
        // css-loader -- 解析css文件
        // style-loader -- 将解析出来的结果 放到html中 使其生效
        
            test:/\.css$/,
            use:['style-loader', 'css-loader'] // webpack底层调用这些loader的顺序是从右向左
        
    ]
   

2.5 处理less和scss

1. 安装

   npm i -D less less-loader sass-loader node-sass

2. 配置less

   
    test:/\.less$/,
    use:['style-loader', 'css-loader', 'less-loader']
   

3. 配置sass

   
    test:/\.scss$/,
    use:['style-loader', 'css-loader', 'sass-loader']
   

2.6处理图片和字体

1. 下载、url-loader 封装了 file-loader

   npm i -D file-loader url-loader

2. 配置

   1. 配置 filte-loader

    // 处理图片
     test: /\.(png|jpg|gif)$/,
     use: 'file-loader'
   ,
    // 处理字体图标文件
     test: /\.(woff|woff2|eot|svg|ttf)$/,
     use: 'file-loader'
   ,

   1. 配置url-loader

   
    test:/\.(png|jpg|gif)$/,
    use:
        loader: 'url-loader',
        options: 
            // limit 表示若图片的大于5KB、就以路径的形式展示、小于的话就用base64格式展示
            limit: 5 * 1024,
         outputPath:'images', // 图片生成的文件夹名称
         name:'[name]-[hash:6].[ext]' // 生成的图片名称
        
    
    //use 也可以写成数组
    use:[
       loader:'url-loader',
       options:
        limit: 12 * 1024
       
     ]
   

2.7 babel

1. 安装

   npm i -D babel-loader @babel/core @babel/preset-env

2. 如果需要支持更高级别的es6语法、可以继续安装插件、在官网找对应的插件安装

   npm i -D @babel/plugin-proposal-class-properties 

3. 配置

   
    test: /\.js$/,
    use: 
        loader: 'babel-loader',
        options: 
            presets: ['@babel/env'],
            plugins: ['@babel/plugin-proposal-class-properties']
        
    ,
    exclude: /node_modules/,
    include: path.resolve(__dirname, '../src')
   

官方更加建议使用 .babelrc 配置

 "presets": ["@babel/env"],
 "plugins": ["@babel/plugin-proposal-class-properties"]

3.1 如果需要使用 genetator，无法直接使用 babel 进行转换，因为会将 generator 转换为一个 regeneratorRuntime， 然后使用 mark 和 wrap 来实现 generator

• 安装插件

  npm i -D @babel/plugin-transform-runtime 
  npm i -S @babel/runtime

• 配置中、修改 plugins

  
  plugins: [
   '@babel/plugin-proposal-class-properties',
   '@babel/plugin-transform-runtime'
  ]

3.2 如果需要使用 ES6/7 中对象原型提供的新方法，babel 默认情况无法转换，即使用了 plugin-transform-runtime 的插件也不支持转换原型上的方法，需要使用 polyfill

• 安装

  npm i -S @babel/polyfill

• 在需要使用该模块的地方直接引入

  import '@babel/polyfill'

2.8 插件

2.8.1 clean-webpack-plugin

该插件可以用于自动清除dist目录后重新生成，在 npm run build 的时候非常有用

1. 安装插件

   npm i -D clean-webpack-plugin

2. 引入插件

   const CleanWebpackPlugin = require('clean-webpack-plugin')

3. 配置插件

   plugins:[
     new HtmlWebpackPlugin(
       filename: 'index.html',
       template: './src/index.html'
     ),
     new CleanWebpackPlugin()
   ],

2.8.2 copy-webpack-plugin

1. 安装

   npm i -D copy-webpack-plugin

2. 引入插件

   const CopyPlugin = require('copy-webpack-plugin');

3. 配置插件

   from:源、从哪里拷贝，可以是绝对路径或者绝对路径，推荐绝对路径

   to:目标、拷贝到哪里去，相对于output的路径，同样可以是相对路径或者绝对路径，更推荐相对路径、直接相对于dist目录即可

   plugins:[
     new HtmlWebpackPlugin(
       filename: 'index.html',
       template: './src/index.html'
     ),
     new CleanWebpackPlugin(),
     new CopyPlugin([
        
         from: path.join(__dirname, 'static'),
         to: 'static'
       
     ])
   ],

2.8.3 BannerPlugin

是一个webpack内置插件、用于给打包的js文件加上版权注释信息

1. 引入webpack插件

   const webpack = require('webpack')

2. 配置

   plugins:[
     new HtmlWebpackPlugin(
       filename: 'index.html',
       template: './src/index.html'
     ),
     new CleanWebpackPlugin(),
     new CopyPlugin([
        
         from: path.join(__dirname, 'static'),
         to: 'static'
       
     ]),
     new webpack.BannerPlugin('王耀的版权信息')
   ],

• 必懂的webpack高级配置
• 必懂的wenpack优化