# mode
## 文档：https://webpack.docschina.org/configuration/mode/#usage
## 配置
module.exports = {
mode: 'production', // 不设置，默认是 production, 可选值：none、production、development
}
# webpack 模块化的原理
## webpack 打包代码，允许使用各种模块化，如CommonJs、ES Module
CommonJs如 module.exports导出、require()导入
ES Module 如 export、export default导出、import导入等
## webpack 模块化的四个原理：
1. CommonJs模块化原理
2. ES Module实现原理
3. CommonJs加载 ES Module 原理
4. ES Module加载CommonJS 原理
注：为了便于阅读打包的源码，分析上面的原理，需要对webpack进行配置：
```
mode: 'development', // 设置为：development
devtool: 'source-map', // 当mode设置为`development`，devtool的默认值就是`eval`，打包后不便于阅读，设置为`source-map`，但同时，会和生成的js同一目录生成一个.map文件
```
# devtool.source-map
## 介绍
1. 打包后代码和编写代码差异大，ES6会被转成ES5、行号列号编译后和编译前不一致、丑化压缩，将编码名称改变等、typescript也会转成JavaScript。但是，一旦报错，很难调试
2. source-map是已转换代码的映射的原始文件，使浏览器可以重构原始源，并在调试工具显示重建的原始源
3. 内容解释：
{
version 当前source-map版本
sources 源文件
names 转换之前变量和属性名称，如果 model 是 development，则 names 为空，因为开发模式下，变量和属性名不会被转换丑化
mappings base64 VLQ编码后的值，无法阅读，是source-map转码前，源文件的内容
files 最终打包后文件
sourcesContent 就是源代码
sourceRoot 相对根目录
}
## source-map值介绍
1. devtool 一共有26个值，见 https://webpack.docschina.org/configuration/devtool/#devtool
Ⅰ、不写 devtool，即 none，建议生产模式下，即 mode=production下使用
Ⅱ、false 不生成eval也不生成source-map，不利于调试，可以生产环境下使用
Ⅲ、eval：development模式下，不生成source-map，但是生成的代码还是能还原报错的文件，因为eval执行的代码块里注释有当前文件路径
Ⅳ、source-map：生成 map 文件，方便错误提示，但是如果代码被loader处理过，建议用 cheap-module-source-map
Ⅴ、cheap-source-map：打包比source-map快点，其他和 source-map差不多
Ⅵ※※、cheap-module-source-map：仍会生成map文件，类似于cheap-source-map，但是对源自loader的source-map处理会更好，当源代码被loader处理过，如babel、ts-loader，用这个，会还原成处理之前的代码进行错误提示，更加直观，建议测试环境下用。
Ⅶ、hidden-source-map：用处不大，和source-map几乎一样，知识把生成的最后一行的注释去了，浏览器会找不到生成的source-map，适合于生产环境的调试
ⅤⅢ、nosources-source-map：生成和 source-map 几乎一样，但是报错时，点进错误里面也无法加载源文件
其他的值，都是上面的组合。
devtool的最佳设置方式：
开发环境建议使用：source-map（vue使用的方式）或 cheap-module-source-map（react使用的方式）
测试环境同开发环境
正式环境为false或直接不写 devtool（即none）
## 使用
1. 根据源文件生成source-map文件，在webpack配置，打包生成source-map
```
devtool: 'source-map'
```
2. 在转换后的代码，最后添加一个注释，指向 source-map ，webpack自动加，如：//# sourceMappingURL=bundle.js.map
3. 浏览器运行时，会自动根据上面的注释，找到对应的source-map，从而还原代码，方便找到错误
4. chrome浏览器默认支持source-map，如果要禁用，选择 调试窗口右上角设置按钮->Preference->Source->Enable Javascript sorce maps、Enable CSS source maps 取消勾选