47.精读《webpack4.0 升级指南》.md

47.精读《webpack4.0 升级指南》.md

现在看来本文时间点的确有点落后了，因为 webpack5 都快出了一年了，但是对比两年前的这个时候，还是 parcel， rollup 等前端构建打包工具横行的年代，webpack 是一个大而全的解决方案，同时可以拥抱零配置，上手迁移把~

精读

• webpack-cli 启动，webpack --mode模式可以自己配置 webpack 和其启动命令执行方式，webpack4 更推荐让开发者使用高度封装的 cli,而不是用 node 开发

• 使用 webpack-cli, webpack-dev-server-cli

  // 安装webpack^4.1.1 webpack-cli^2.0.10, webpack-dev-server^3.1.0, 并创建一个公共配置文件webpack.config.ts
  export default {
    entry,
    output,
    module: {
      rules
    },
    resolve,
    
    resolveLoader,
    
    devServer: {
      https: true,
      open: true,
      overlay: {
        warning: true,
        errors: true,
      },
      port
    }
  }

  记得使用 tsc(typeScript complier)转换为 webpack.config.js 作为 cli 入口

  • 开发模式下使用： webpack-dev-server --mode development --progress --hot --hotOnly --config ./webpack.config.js

  • 生产模式下使用: webpack --mode production --progress --config ./webpack.config.js

• 开启--mode production，自动开启代码压缩，scope hoist 等插件，自动传递环境变量给 lib 包，不需要 plugins 这个配置项了，同理开启 --mode development 会自动开启 sourceMap 等插件，只关心简单的配置，4.0 零配置这一点可以

• 虽说零配置，但是该配的还是要了解，分别为entry output module

• 给配置文件传参是可以使用--env 传递：

  webpack-dev-server --mode development --env.entry ./src/main.tsx

• Webpack.config.ts 接收

  const entry = yargs.argv.env.entry

• 使用 typeScript + webpack： ts-loader

  {
    module: {
      rules: [{
        test: /\.(tsx|ts)?$/,
        use: ["ts-loader"],
      }]
    }
  }
  // tsconfig.json 解析模块策略使用"module": "esnext"

  • 原因： es6 import 语句才能进行 tree shaking 或者动态 import 优化，使用白名单方式对待 typeScript 和 babel，剩下的丢给 webpack 处理，可以得到最大程度的性能优化

• 使用 typeScript + babel + webpack

• 注意处理顺序： ts -> babel -> webpack

  • 多出的 babel，将 ts 编译兼容模式关闭， "target": "exnext" 模块也不要解析 "module":"esnext", ts-loader 只需要将 ts 编译城 js，其他全部丢给 babel 做处理

    {
      presets: [
        ["env", {
          modules: false
        }],
        ["stage-2"]
      ],
        plugins: [
          ["transform-runtime"]
        ],
          comments: true // 保留注释 如/*webpackChunkName: "src" */
    }

summary

• 合理使用 typeScript 、babel，让各自发挥最小功能，只需要将原生模块化代码交给 webpack ，配合--mode production配置，webpack 会自动开启所有需要优化的插件

番外

• 现代浏览器支持以下的两种写法用于资源加载:

  <link rel="preload" /> <!-- 收集当前用到的资源 -->
  <link rel="prefetch" /> <!-- 收集未来用到的资源 -->

• 页面本质上也是未来一种资源，prefetch 让浏览器在空闲时间下载下一个页面的 chunk 文件

• 前端包体积优化效率一般和用户体验是违背的，所以下一个页面如果在下一个 chunk 中，用户点击必然产生 loading，结合 prefetch 可以有效减少因为 chunk 加载带来的 loading 问题

• 两种做法：

  • 全量模式：preload-webpack-plugin 将所有生成的 chunk 都作为 prefetch 资源，但是所有规模的项目都不会有太多的 chunk，所以方法不够优雅
  • 按需模式： 理论加实践的做法，提供一个定制的 link 标签，根据 URL 地址按需生成 prefetch 标签，缺点是如果用户不按照约定使用内置的 link，prefetch 会无效