webpack5新特性记录

webpack5大致使用和webpack4相同

介绍下新的特性

1、启动命令不一样了

webpack serve 就能启动 webpack-dev-server

 "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },

packjson结构

{
  "name": "zhufeng-webpack5-202012",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },
  "sideEffects":["*.css","@babel/polyfill"],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "stream-browserify": "^3.0.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "lodash-es": "^4.17.20",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

2、持久化缓存

通过cache配置缓存存储位置和开启

{
...
    //watch:true,
    cache: {
        //不要再使用cnpm来安装模块
        type: 'filesystem', //memory filesystem
        cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack')
    },
}

3、资源模块解析不用各种loader了

• 资源文件 不用搞file-loader url-loader 用type定义

...
module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/, //不打包 不编译node_modules下面的文件
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                                '@babel/preset-react'
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.png$/,
                type: 'asset/resource' //对标file-loader
            },
            {
                test: /\.ico$/,
                type: 'asset/inline' //对标url-loader 模块的大小<limit base64字符串
            },
            {
                test: /\.txt$/,
                type: 'asset/source' //对标raw-loader
            },
            {
                test: /\.jpg$/,
                type: 'asset', //对标raw-loader
                parser: {
                    dataUrlCondition: {
                        maxSize: 4 * 1024
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },

4、moduleIds chunkIds优化

以前webpack4.0 chunkId是用数字0 1 2顺序定义， 模块少量变动引入会打乱了各个文件命名， 对缓存资源文件不友好，于是可以通过配置chunkId moduleIds的规则。

{
...
  optimization: {
        usedExports: true, //标使用到的导出
        moduleIds: 'deterministic', //模块名称的生成规则
        chunkIds: 'deterministic' //代码块名称的生成规则
    },
}

打包出来：

5.polyfill移除 ，要手动安装， 不适用设置false

// 使用：
   fallback:{
            'crypto':require.resolve('crypto-browserify'),
            'stream':require.resolve('stream-browserify'),
            'buffer':require.resolve('buffer')
        }, 

6、tree-shaking更强大

会干掉黄色的方法 因为没使用过
开启方式：

• 1、 配置production模式和 usedExports= true

{
   ...
   mode: 'production',
   optimization: {
      usedExports: true, // true: 使用到的导出才使用
      ...
   },

}

• 2、控制无副作用
  -
• package.json里面sideEffects可配置的 如只允许css和polyfill有副作用
  直接import './title.js 会删掉里面的代码 除非导出title里面的函数使用
  不配置的情况下 直接import ‘index.css’; index.css会被清空 因为被当成没使用过 就清除掉

package.json
{
...
"sideEffects":["*.css","@babel/polyfill"],
}

7、模块联邦

共享各个项目的资源，如组件、函数等。微前端的实现方式之一。
具体看下一遍文章 > 模块联邦实现微前端