webpack 是什么？
- 官方网站:https://webpack.js.org/
- 中文网站:https://www.webpackjs.com/
本质上，`webpack` 是一个现代 `JavaScript` 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地
构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
安装
`webpack` 是一个使用 `Node.js` 实现的一个模块化代码打包工具。所以，我们需要先安装 webpack，安装之前需要搭建好 `Node.js` 环境
npm install -D webpack webpack-cli
注：不推荐全局安装
`webpack-cli` : 提供 webpack 命令、工具，类似 `create-react-app`
`webpack` : webpack 代码，类似 `react`
使用
./node_modules/.bin/webpack
查看版本
./node_modules/.bin/webpack -v
也可以编辑 `package.json` 的 `scripts` 来简化输入
// package.json
{
...,
"scripts": {
"start": "webpack" // scripts 中可以定位到 ./node_modules/.bin/ 目录下
}
}
当然，还可以使用更加方便的方式：
npx webpack
通过 `npx` 也可以帮助我们定位命令到 `./node_modules/.bin/` 目录下
注：npm5.2+ 增加，如果没有，可以使用 npm i -g npx 来安装
打包模块
打包之前，我们需要了解一个概念，入口文件
入口文件
入口文件就是我们项目中加载的第一个文件，比如上面的 `main.js` 文件，其它文件都是通过 `import` 等方式引入的，`webpack` 会从
我们指定的入口文件开始分析所有需要依赖的文件，然后把打包成一个完整文件。
打包命令
webpack ./js/index.js
上面命令会使用 `webpack` 默认的一些配置对模块文件进行打包，并把打包后的文件输出到默认创建的 `./dist` 目录下，打包后的
文件名称默认为 `main.js`。
模块文件打包以后，就可以在不支持 es6 模块语法的浏览器环境下引入使用了。
打包文件分析
- 把分散的模块文件打包到一个文件中，不需要外部引入了
- 内置了一个小型模块加载器(类似 `requireJS`)，实现了打包后的代码隔离与引用
以上就是 webpack 最基础的使用于基本原理，当然强大的 `webpack` 远远不止这些功能。
打包配置
虽然，我们可以直接通过命令的来打包，但是推荐创建一个 `webpack.config.js` 的配置文件来实现更方便和强大的功能。
`webpack` 命令在运行的时候，默认会读取运行命令所在的目录下的 `webpack.config.js` 文件，通常我们会在项目的根目录下运行命令
和创建配置文件。
我们也可以通过 `—config` 选项来指定配置文件路径：
webpack --config ./configs/my_webpack.config.js
通常情况下，我们的项目目录大致如下：
核心配置
mode
`"production" | "development" | "none"`
module.exports = {
mode: 'production'
}
entry
output
打包后的文件位置
- 可以指定一个固定的文件名称，如果是多入口多出口(`entry` 为对象)，则不能使用单文件出口，需要使用下面的方式
- 通过 `webpack` 内置的变量占位符：`[name]`
深入
在 `webpack` 中，有一个很重要的特性：模块不仅仅只是 `js` 的文件，`webpack` 可以把任意文件数据作为模块进行处理，
包括：非 js 文本、css、图片等等
但是 `webpack` 默认情况下只能处理 `js` 模块，如果需要处理其它类型的模块，则需要使用它提供的一些其它功能
执行简要流程
Loaders
https://webpack.js.org/loaders/
当 `webpack` 碰到不识别的模块的时候，`webpack` 会在配置的 `module` 中进行该文件解析规则的查找
- `rules` 就是我们为不同类型的文件定义的解析规则对应的 loader，它是一个数组
- 每一种类型规则通过 test 选项来定义，通过正则进行匹配，通常我们会通过正则的方式来匹配文件后缀类型
- `use` 针对匹配到文件类型，调用对应的 `loader` 进行处理
网友评论