跳到主要内容

打包

基本写法：

npx webpack --entry=./index.js --output-filename=oo.js --mode=development
  • --entry 入口位置
  • --output-filename 打包后文件名，默认会在 dist 文件夹下
  • --mode 打包方式， development 为开发， production 为生产， none 为没有

使用 npm script​

scripts 是 npm 提供的脚本命令，在 package.json 文件下添加下面的代码，可替代原命令行：

"scripts" : {
"build" : "webpack --entry=./index.js --output-filename=oo.js --mode=development"
}
....

.json 文件为配置文件，禁止无关字符出现。包括 js 注释

默认入口文件​

webpack 默认的入口文件就是 src/index.js ，所以：

"scripts" : {
"build" : "webpack --output-filename=oo.js --mode=development"
}
....

默认配置文件​

webpack 的默认配置文件为 webpack.config.js 。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'oo.js',
  },
  mode: 'development',
};

原理​

  • 最外层立即执行匿名函数。它用来包裹整个 bundle ，并构成自身的作用域
  • installedModules 对象。每个模块只在第一次被加载的时候执行，之后其导出值就被存储到这个对象里面，当再次被加载的时候直接从这里取值，而不会重新执行
  • webpack_require 函数。对模块加载的实现，在浏览器中可以通过调用 webpack_require(module_id) 来完成模块导入
  • modules 对象。工程中所有产生了依赖关系的模块都会以 key-value 的形式放在这里。 key 可以理解为一个模块的 id ，由数字或者一个很短的 hash 字符串构成； value 则是由一个匿名函数包裹的模块实体，匿名函数的参数则赋予了每个模块导出和导入的能力

执行：

  • 在最外层的匿名函数中会初始化浏览器执行环境，包括定义 installedModules 对象、 webpack_require 函数等，为模块的加载和执行做一些准备工作

  • 加载入口模块。每个 bundle 都有且只有一个入口模块，在上面的示例中， index.js 是入口模块，在浏览器中会从它开始执行

  • 执行模块代码。如果执行到了 module.exports 则记录下模块的导出值；如果中间遇到 require 函数（准确地说是 webpack_require ），则会暂时交出执行权，进入 webpack_require 函数体内进行加载其他模块的逻辑

  • 在 webpack_require 中会判断即将加载的模块是否存在于 installedModules 中。如果存在则直接取值，否则回到上一步，执行该模块的代码来获取导出值

  • 所有依赖的模块都已执行完毕，最后执行权又回到入口模块。当入口模块的代码执行到结尾，也就意味着整个 bundle 运行结束