这是我参与「第四届青训营 」笔记创作活动的第19天

什么是Webpack

前端项目由资源构成

例如：JS、TS、CSS、Vue、Sass、WEBP等

手动管理资源的弊端:

• 依赖手工，比如有50个JS文件...操作，过程繁琐
• 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
• 开发与生产环境一致，难以接入TS或JS新特性
• 比较难接入Less、Sass等工具
• JS、图片、CSS资源管理模型不一致

Webpack本质上是一种前端资源编译、打包工具

• 多份资源文件打包成一个Bundle
• 支持Babel、Eslint、 TS、CoffeScript、 Less、Sass
• 支持模块化处理css、图片等资源文件
• 支持HMR+开发服务器
• 支持持续监听、持续构建
• 支持代码分离
• 支持Tree- shaking
• 支持Sourcemap
• Etc...

使用webpack

示例

1. 安装

npm i -D webpack webpack-cli

2. 编辑配置文件

module.exports = {
entry : 'main.js',
output: {
    filename: "[name].js",
    path: path.join(__dirname,"./dist"),
}，
module: {
rules:[{
    test :/\.Less$/i,
    use: ['style-loader', 'csS-loader', 'less-loader']
    }]
}

3. 执行编译命令

npx webpack

核心流程

1. 入口处理 从entry 文件开始，启动编译流程

2. 依赖解析 从entry文件开始，根据require or import等语句找到依赖资源

3. 资源解析 根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容

4. 资源合并打包 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

递归调用2、3，直到所有资源处理完毕

模块化+一致性

• 多个文件资源合并成一个，减少http 请求数
• 支持模块化开发
• 支持高级JS特性
• 支持Typescript、 CoffeeScript方言
• 统一图片、CSS、字体等其它资源的处理模型
• Etc...

关于Webpack的使用方法，基本都围绕"配置"展开，而这些配置大致可划分为两类:

• 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
• 工具类：主流程之外，提供更多工程化能力的配置项

流程类配置

• 输入:
  • entry
  • context
• 模块解析:
  • resolve
  • externals
• 模块转译:
  • module
• 后处理:
  • ptimization
  • mode
  • target

配置总览

按使用频率：

• entry/output
• module/plugins
• mode
• watch/ devServer/devtool