Webpack原理(2) — 加载原理

webpack的核心目的和功能就是打包JavaScript代码，在时间的推进过程中，其逐渐演化成了一个生态体系，成为前端打包代码和处理开发时候必不可少的一个工具。

本文首发于我的个人博客: https://teobler.com, 转载请注明出处， 文章中提到的所有源代码来自于https://github.com/thelarkinn/webpack-workshop-2018

以下代码位于feature/01-fem-first-script分支

NPM scripts

Install & Run

首先将代码clone到你本地，然后运行yarn install。既然文章讲的是webpack，那么问题来了，当你运行这个命令的时候，发生了什么？

在你运行yarn install这个命令的时候，首先会在你的node_modules目录下添加一个.bin文件夹，里面是一些二进制可执行文件(包括webpack它本身)，这些文件可以被node_modules里面你下载的所有packages运行，里面的可执行文件都在npm这个作用域下才可执行。

比如当你直接运行webpack的时候，是会抛错的:

$ webpack
zsh: command not found: webpack

但是此时如果你在package.json文件中加入下面的代码:

"script" {
   
	"webpack": "webpack"
}

然后再运行npm run webpack此时将会以默认设置运行node_modules中的webpack(注：这里需要webpack4及以上版本)，在这个script标签中NPM允许你在其作用域中运行任何合法的script，甚至是bash的script。

这时其实我们的代码库里面是没有任何webpack的配置的，其默认回去寻找项目中的src目录下的index文件，但是这时webpack会抛出一个warning，推荐你设置环境变量以使用不同环境下的默认设置

Compose Scripts

NPM script有一个强大的功能是能够将已有的命令合并起来，并且还可以提供额外的参数，比如我们可以加一个新的script去运行之前的webpack并在新的命令里传入参数，避免重复新增和修改之前的script :

"script" {
   
	"webpack": "webpack",
	"dev": "npm run webpack -- --mode development"
	// 这里的 -- 代表将后面的参数传入前面的命令中
}

以下代码位于feature/03-fem-debug-script分支

Debugging

我不知道各位读者是怎么debug一个Node程序的，至少对于我来说在这之前我完全依赖于console.log，其实node早已经为我们提供了一个方便的方式，只需要在package.json文件中加入一个script:

"script": {
   
	"debug": "node --inspect --inspect-brk /path/to/file/you/want/to/debug"
}

运行这段script，然后打开你的chrome，在地址栏输入chrome://inspect或者在新版本的chrome打开控制台，在左上角有一个Node的logo，点击即可打开Node专用的devtool。

如果此时我们将文件路径换成./node_modules/webpack/bin/webpack.js的话，我们就可以debug webpack了。你可以再devtool里看到webpcck是怎样被加载的，每一步是如何进行的等等。这个步骤不单单对了解webpack在做什么有用，如果你在编写自己的plugin或者loader的话，你可以用这种方式去做debug。这就是传说中的"debug driven development"。

First Module

在src目录下加入一个新的文件foo.js，里面只写一个导出:

export default "foo";

然后在index.js里面将其import进来console出来:

import foo from "./foo";

console.log(foo);

然后直接运行npm run dev，这时你应该能看到webpack将两个文件打包成功，并且在项目目录下出现了一个新的dist文件夹，里面的main.js文件就是刚刚打包好的内容(这是w