Webpack

webpack是啥

webpack是模块打包工具，本身只支持js文件的打包，如果打包其他文件则需要对应的loader进行处理。而额外的按需加载，压缩等需要插件进行实现。

loader

用于处理非js模块

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。

1. css-loader
2. style-loader
3. postcss-loader
4. less-loader
5. sass-loader
6. file-loader
7. url-loader
8. vue-loader

plugin

1. html-webpack-plugin (opens new window) - https://github.com/jantimon/html-webpack-plugin
2. mini-css-extract-plugin

souceMap (opens new window)

devtool字段可用属性 (opens new window)

1. cheap-module-eval-source-map
2. cheap-module-source-map

Hot Module Replacement 热模块更新 (opens new window)

tree shanking (opens new window)

优化(Optimization) (opens new window)

SplitChunksPlugin (opens new window)

常见配置

1. entry (opens new window) -
2. output (opens new window) -
3. loader (opens new window) -
4. plugins (opens new window) -
5. mode'development',
6. DevServer (opens new window)-
7. Resolve (opens new window)
8. 资源模块,url-loader,file-loader等的替换 (opens new window)

打包原理

1. 执行.bin/webpack
2. 执行 node_modules/webpack-cli/bin/cli.js
   • 执行 processOptions
   • 执行 compiler = webpack(options);
     • 遍历默认插件，并调用 plugin.apply(compiler);
     • compiler = new Compiler(options.context);
     • return compiler
3. 从入口文件开始解析，并遍历分析依赖，形成依赖树
4. 对不同的文件使用对应的loader进行编译，转为js文件
5. 整个编译过程会触发不同的钩子，钩子可以被插件监听，从而干涉处理结果

compiler对象是一个全局单例，他负责把控整个webpack打包的构建流程。compilation对象是每一次构建的上下文对象，它包含了当次构建所需要的所有信息，每次热更新和重新构建，compiler都会重新生成一个新的compilation对象，负责此次更新的构建过程。

而每个模块间的依赖关系，则依赖于AST语法树。每个模块文件在通过Loader解析完成之后，会通过acorn库生成模块代码的AST语法树，通过语法树就可以分析这个模块是否还有依赖的模块，进而继续循环执行下一个模块的编译解析。

知识点

1. require.context (opens new window)
2. webpack-dev-middleware (opens new window)
3. mini-css-extract-plugin:
4. 预获取/预加载模块(prefetch/preload module) (opens new window)
5. 打包 分析(bundle analysis) (opens new window)
6. 输出文件名设置 (opens new window)
7. 输出文件名设置-占位符 (opens new window)
8. SplitChunksPlugin (opens new window)
9. externals (opens new window)
10. 命令行接口（CLI） (opens new window)
11. 命令参数 (opens new window)

官方文档阅读步骤

1. 概念 (opens new window) -https://webpack.docschina.org/concepts/