webpack二刷之一、快速介绍

webpack 快速介绍

背景：nodev12.10.0 +webpack4 + yarn

webpack 快速上手

安装依赖 yarn add webpack webpack-cli --dev

执行命令yarn webpack

会默认从src/index.js开始打包，并将文件默认输出为dist目录下的main.js文件

打包过程会把import、export转换掉，所以引入js文件时，就不再需要type="module"

webpack 配置文件

webpack 4 以后的版本支持零配置的方式直接启动打包。

整个打包过程会按照约定，默认将src/index.js作为打包入口，最终打包结果会存放在dist/main.js中。

通过在配置文件webpack.config.js中配置entry、output自定义入口和输出路径。

webpack.config.js是运行在node环境中的js文件，需要按照CommonJS的方式去编写代码。

1. entry 如果是相对路径，前面的./不能省略
2. output 输出配置
   1. filename输出文件的路径
   2. path 输出目录，必须是绝对路径，使用node的path模块转换

webpack的配置文件，支持导出的格式：

1. 配置对象
2. 多个配置对象组成的数组，可以一次构建执行多个配置任务
3. 函数(env, argv) => {}
   1. env接收cli命令传递的环境名（--env）参数
   2. argv指cli命令中所有的参数

webpack 工作模式

webpack 4 新增了一个 工作模式 的用法，它大大简化了webpack的复杂程度。

它是针对不同环境的几组预设的配置。

当未配置mode属性时，终端会发出警告，大致内容是：mode未配置，默认使用production，可以指定值为development、production、none。

production预设，webpack会自动启动一些优化插件，例如压缩代码。

可以通过--mode <value>命令指定工作模式，也可以在配置文件中指定mode属性，取值有以下三个：

• production 生产模式，自动启动一些优化打包结果的配置
• development 开发模式，会自动优化打包的速度，添加一些调试当中用到的辅助
• none 运行最原始状态的打包，不会做额外的处理

webpack 打包结果工作原理

先将工作模式设置为none以观察最原始状态的打包。

查看打包文件代码

(function(modules){...})([...])

整体生成代码是一个立即执行函数，这个函数是webpack的工作入口，它接收一个modules参数。

调用函数时传入一个数组，数组中每个元素都是参数列表相同的函数。

每一个函数，就是源代码中对应的每个模块。

也就是说，每个模块都会包裹在这样一个函数中，从而实现一个私有作用域。

工作入口函数讲解:

(function(modules) {
  // 用于缓存(/存放)载过的模块
  var installedModules = {};
  // 定义一个用于加载模块的函数
  function __webpack_require__(moduleId) {...}
  // 下面是在__webpack_require__上挂载了一些数据和工具函数
  __webpack_require__.m = modules;
  __webpack_require__.c = installedModules;
  __webpack_require__.d = function(exports, name, getter) {...};
  __webpack_require__.r = function(exports) {...};
  __webpack_require__.t = function(value, mode) {...};
  __webpack_require__.n = function(module) {...};
  __webpack_require__.o = function(object, property) {...};
  __webpack_require__.p = "";

  // 最后调用__webpack_public_path__加载源代码中的入口模块并返回
  // moduleId(0)即传入的模块列表(modulelist)的下标
  return __webpack_require__(__webpack_require__.s = 0);
})([...modulelist])