什么是Webpack

• Webpack之前

  1. 需要手动管理资源
  2. 当代码文件之间有依赖,需要严格按照依赖顺序书写
  3. 开发与生产环境一致,难以接入ts或js新特性
  4. 比较难接入less,sass等工具
  5. js,图片,css资源管理模型不一致

• Webpack之后

Webpack使用

config

webpack的使用的本质就是,编写配置文件,配置可分为两类

1. 流程类

作用于流程中某个or若干个环节,直接影响打包效果的配置项

2. 工具类

主流程之外,提供更多工程化能力的配置项

常用配置

1. 输入
   1. entry: 项目的入口路径
   2. context: 入口文件所处的目录的绝对路径的字符串
2. 模块解析
   1. resolve:解析配置选项，用于告诉 Webpack 该如何解析模块依赖。可以设置 resolve.alias、resolve.extensions、resolve.modules 等。
   2. externals:外置扩展配置选项，用于配置排除打包的模块。例如，可以将 jQuery 作为外置扩展，避免将其打包到应用程序中
3. 模块转译
   1. module:模块配置选项，使用不同的 loader 可以让 Webpack 处理不同类型的文件。例如，对于 CSS 文件，可以使用 css-loader 和 style-loader 处理。
4. 后处理
   1. optimization:优化配置选项，可以使用 optimization.splitChunks 和 optimization.runtimeChunk 配置代码拆分和运行时代码提取等优化策略。
   2. mode:模式,告知 webpack 使用相应模式的内置优化。
   3. target:由于 JavaScript 既可以编写服务端代码也可以编写浏览器代码，所以 webpack 提供了多种部署 target,分别为node和web
5. output: 文件保存的路径和文件名,即出口

解析css

把css解析成js 需要使用loader

使用module中的rules属性,其为对象数组,数组中的对象包含两个属性,test为筛选条件,use则为处理的loader

处理js

使用babel转译js,把高版本的js代码转移成浏览器可兼容的代码

处理HTML

使用hmr热加载