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

早期 web 开发——手动为主

非常依赖手工在 header 和 body 中添加 style 文件和 js 文件，过程非常繁琐。
当文件之间存在依赖时，还需要严格按照某种顺序书写。
难以接入如 js 新特性、Less/Sass等工具。
难以管理静态资源。

09 年开始逐渐出现一些工具，主要用于解决 js 模块化的问题。后来如 webpack 等开始出现，**“前端工程”**的概念产生。

Webpack 介绍

本质上是前端资源的编译和打包工具。
将所有资源文件打包成为一个文件（Bundle）。
支持模块化处理如 css、图片等资源。

使用方式

1. 安装 webpack

npm i -D webpack webpack-cli

2. 编辑配置文件

编辑配置文件是 webpack 工程中最困难的工作，配置项目繁多。

module.export = {
  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

webpack 核心流程

入口处理 entry, context

根据 entry 设定的文件开始启动编译流程。

依赖解析 resolve, externals

从 entry 开始查看内部所有的 import, require 语句，确定一个 JS 依赖树。

资源解析 module

根据 module 设定的一系列规则，对 JS 依赖树文件及文件引用的非标准资源转译成为 JS 的内容。

2 - 3 会进行递归处理，直到所有文件都被解析

资源合并 optimization, mode, target

插入一些运行时代码，进行代码合并、压缩等，最终输出一个产物文件。

本质上讲，webpack 只做了两件事：模块化 + 一致性。

使用 webpack

webpack 的配置文件比较复杂，每个配置里面都有很多配置项，影响产物的生成。大致可以把配置分为两类：

流程类：这个配置项作用在前面核心流程中，直接影响核心流程的结果。
工具类：这个配置项提供了一些额外的工程化能力（如 devtool, tree shaking 等）。

webpack 配置总览

新手上门可以从常用的 entry/output, module/plugins, mode, watch/devServer/devtools 等开始。

构建 Webpack 知识体系｜青训营笔记