以下皆为拉勾教育课件内笔记
简介
什么是 Webpack
Webpack = Web Package，webpack 是⼀个现代 JS 应用程序的静态模块打包器（Module bundler）。它的主要目标是将 JS 文件打包在⼀起， 打包后的文件用于在浏览器中使用。同时，它也能够转换 (transform)、打包 (bundle) 或包裹 (package) 任何资源。
资源网站
官网：https://webpack.js.org/
中文官网：https://webpack.docschina.org/
Github：https://github.com/webpack/webpack
打包原理
打包比喻
构建过程就是将源代码转换成生产代码的过程。
打包过程就是将多个文件合并成一个文件的过程。
Webpack 既可以打包，也可以构建。
Webpack 的功能
- 将多个文件合并（打包），减少 HTTP 请求次数，从而提高效率
- 对代码进行编译，确保浏览器兼容性
- 对代码进行压缩，减小文件体积，提高加载速度
- 检测代码格式，确保代码质量
- 提供热更新服务，提高开发效率
- 针对不同环境，提供不同的打包策略
Webpack 的发展历史
- 2012 年 3 ⽉ 10 ⽇，Webpack 诞⽣
- 2014 年 2 ⽉ ，Webpack 1
- 2016 年 12 ⽉，Webpack 2
- 2017 年 6 ⽉，Webpack 3
- 2018 年 2 ⽉，Webpack 4
- 2020 年 10 ⽉，Webpack 5 （Node.js 10.13+）
核心概念
Webpack 中，主要的核心概念有：
- 入口（Entry）
- 出口（Output）
- 加载器（Loader）
- 插件（Plugins）
- 模式（Mode）
- 模块（Module）
- 依赖图（Dependency Graph）
入口（Entry）
打包时，第⼀个被访问的源码文件。默认是 src/index.js （可以通过配置文件指定） Webpack通过入问，加载整个项目的依赖。
出口（Output）
打包后，输出的文件名称，默认是 dist/main.js（可以通过配置文件指定）。 如下图：出口是 dist/main.js
加载器（Loader）
加载器是以 -loader 为后缀的 npm 包，专门用来处理一类文件（非 JS）的工具，Webpack 默认只能识别 JS，想要处理其他类型的文件，需要对应的 loader 。
命名方式：xxx-loader（css-loader | html-loader | file-loader）
常⽤加载器：https://www.webpackjs.com/loaders/
当前，打包时，我们也可以将不同类型的文件，单独打包
插件（Plugins）
插件是以 -webpack-plugin 为后缀的 npm 包，实现 loader 之外的其他功能，Plugin 是 Webpack 的支柱，用来实现丰富的功能。
命名方式：xxx-webpack-plugin（html-webpack-plugin）
常用插件：https://www.webpackjs.com/plugins/
模式（Mode）
Mode 是用来区分环境的关键字，不同环境的打包逻辑不同，因此需要区分。
三种模式（名称固定，不能更改）
- development（开发环境：自动优化打包速度，添加⼀些调试过程中的辅助）
- production（生产环境：自动优化打包结果）
- none（运行最原始的打包，不做任何额外处理）
模块（Module）
Webpack 中，模块的概念比较宽泛（一切皆为模块），比如 JS 模块、一段 CSS、一张图片、一个字体文件等。
模块详情：https://www.webpackjs.com/concepts/modules/
依赖图（Dependency Graph）
依赖图就是必须加载的内容，例如：使用 Bootstrap 之前必须先引入 jQuery。
最佳实践
最佳实践就是通过最少量的代码，快速上手 Webpack。
-
初始化项目
mkdir myProject cd myProject npm init -y -
安装 Webpack
npm install -D webpack webpack-cli -
创建入口文件（myProject/src/index.js）
/** * Webpack 打包入口文件 */ console.log('Hello Webpack') -
执行打包（必须指定 mode）
webpack ./src/index.js --output-path ./dist --mode=development
配置文件
配置文件是用来简化命令行选项的
- 配置前：webpack ./src/index.js --output-path ./dist --mode=development
- 配置后：webpack
默认的配置文件名称是 webpack.config.js，该配置文件是以 CommonJS 规范进行组织的。使用 Webpack 的过程，大部分就是跟配置文件打交道的过程。
配置详情: https://www.webpackjs.com/configuration/
常用配置
/**
* Webpack 的配置⽂件
*/
const { resolve } = require('path')
module.exports = {
// 打包模式
mode: 'production',
// ⼊⼝⽂件
entry: './src/index.js',
// 出⼝配置
output: {
// 输出⽬录（输出⽬录必须是绝对路径）
path: resolve(__dirname, 'output'),
// 输出⽂件名称
filename: 'bundle.js'
},
// 模块配置
module: {
rules: [
// 指定多个配置规则
]
},
// 开发服务器
devServer: {
},
// 插件配置
plugins: [
]
}
