Lang's blog

webpack 官网 (opens new window)
技能树 (opens new window)
Webpack 知识图谱-博客 (opens new window)

webpack是用来搭建前端工程的 它运行在node环境中，它所做的事情，简单来说，就是打包

具体来说，就是以某个模块作为入口，根据入口分析出所有模块的依赖关系，然后对各种模块进行合并、压缩，形成最终的打包结果

在webpack的世界中，一切皆是模块

# 配置

mode (opens new window) 模式
entry和context (opens new window) 入口和上下文
output (opens new window) 输出
- publicPath (opens new window) 在使用file-loader或url-loader时，模块中的路径来自于某个loader或plugin，当产生路径时，loader或plugin只有相对于dist目录的路径，并不知道该路径将在哪个资源中使用，从而无法确定最终正确的路径
```
  output: {
      // 该配置会为index.html中引入的<script> <link>等标签中的资源路径添加前缀
      publicPath: '/'
  }
```
1
2
3
4
loader (opens new window)
loader 用于对模块的源代码进行转换。
loader 可以使你在 import 或"加载"模块时预处理文件。

webapck的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件, 因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外, 还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包, 在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块, 注意：loader都是用NodeJS编写的

plugin (opens new window) 插件
插件（plugin）是 webpack 的支柱功能。用于扩展webpack的功能。当然loader也是变相的扩展了webpack ，但是它只专注于转化文件这一个领域。
而plugin的功能更加的丰富，而不仅局限于资源的加载。一个插件就是一个类，可以在打包过程中的特定阶段执行。
从作用角度简单来讲：loader帮助我们加载文件资源，而plugins则是loader的延伸，并不限制于加载文件资源。丰富了loader的功能。
devtool (opens new window) 源码视图

resolve (opens new window) 解析相关的配置

alias (opens new window) 路径别名
extensions (opens new window) 缺省的文件和后缀名

modules webpack解析模块时应该搜索的目录

   resolve: {
       // 创建 import 或 require 的路径别名
       alias: {
           "@": path.resolve(__dirname, 'src'),
           "_": __dirname
       },
       // 使的我们在引入资源时可省略后缀，按此配置顺序查找
       extensions: ['.js', '.json', '.wasm'],  // 默认值
       // webpack 解析模块时应该搜索的目录
       modules: ['node_modules'],  // 默认值
   },