# 1、什么是Webpack (前端自动化构建工具)

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

构建的定义

构建就是把源代码转换成发布到线上可执行的 JavaScrip、CSS、HTML 代码,包括以下内容。

构建其实是工程化、自动化思想在前端开发中的体现,把一系列流程用代码去实现,让代码自动化地执行这一系列复杂的流程。

  • 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  • 文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
  • 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
  • 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
  • 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

# 2、初始化项目

mkdir shuhao_webpack
cd shuhao_webpack
npm init -y

# 3、快速上手

# 3-1 webpack核心概念

  • Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
  • Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
  • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
  • Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
  • Output:输出结果,在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
  • context:t即是项目打包的路径上下文,如果指定了context, 那么entry和output都是相对于上下文路径的,contex必须是一个绝对路径

webpack执行流程

1、Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。

2、每找到一个 Module, 就会根据配置的Loader去找出对应的转换规则,对 Module 进行转换后,再解析出当前 Module 依赖的 Module。
这些模块会以 Entry 为单位进行分组,一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk

3、最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

# 3-2 安装webpack

npm install webpack webpack-cli-D-D 安装开发环境的依赖,不会影响线上)

mkdir src
touch index. js

// 新建 配置文件 
touch webpack. config. js

# 3-3 执行webpack

// (会找到node_modules bin下的webpack-cli文件,寻找入口文件)
webpack配置文件名为 webpack. config. js时
npx webpack 

自定义的配置文件名时 需要指定配置文件
npx webpack --config webpack. config. my. js

# 3-4 配置package. json 打包

"scripts": {
  "build": "webpack --config webpack. config. my. js"
}

# 3-4 webpack基本配置

module. exports = {
  mode: 'development', //两种模式 production development
  entry: '. /src/index. js', // 入口
  output: {

    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'build') // 绝对路径(当前路径下新建 build 文件夹)

  }
}

yarn add webpack-dev-server -D