🌈 Webpack

# 学会 webpack 从零到一系列

使用 webpack 5 作为实践,由于部分特性改动以及周边工具库更新等问题需要踩坑。webpack 周边工具库更新速度也很快,遇到报错需要去官网查看最新用法的改动。

# 系列文章

以此仓库记录 webpack 的使用与原理

# webpack 5 需要注意的事项

# webpack-cli 4.x 版本下使用 webpack-dev-server

关于 webpack-cli 4.0 及以上版本和 webpack-dev-server 之间的依赖报错问题,在 webpack 官网上面可以看到安装和配置的方式没有变动,启动的命令变了,直接使用 webpack serve 命令启动。

之前的依赖关系是 webpack-dev-server 依赖于 webpack-cli 内部的 config-yargswebpack-cli 升级到 4.0 以后,统一了 webpack 命令的入口文件,反过来依赖 webpack-dev-server 来实现 webpack serve 的命令。

# 关于 target 默认输出代码格式

webpack 5 默认打包生成的组织代码中包含了现代化浏览器所支持的 const 与箭头函数,而默认的 target: 'web' 属性在 webpack 4 下转换组织代码格式为 es5,如果需要 webpack 5 打包输出的组织代码也为 es5,需要配置 target 属性值为 es5

  // webpack.config.js
  module.exports = {
    ...
+   {
+     target: 'es5'
+   },
    ...
  }

01

上次更新: 1/13/2021, 5:51:22 PM