1. 介绍
2. 安装
安装webpack V4+版本时，需要额外安装webpack-cli
检查版本
卸载
3. 默认配置
- 3.2 默认配置
- 3.1 例子
4.配置核心概念
5. module/chunk/bundle关系
6.核心工作原理
多页面打包通用方案

1. 介绍

webpack is a module bundler (模块打包⼯具)

webpack 是⼀个打包模块化 JavaScript 的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中，是⼯程化、⾃动化思想在前端开发中的体现。

2. 安装

全局（不推荐） ```javascript
安装webpack V4+版本时，需要额外安装webpack-cli
npm install webpack webpack-cli -g

检查版本

webpack -v

卸载

npm uninstall webpack webpack-cli -g

webpack -v // 默认在全局环境中查找


- **局部**
```javascript
# 安装最新的稳定版本
npm i -D webpack
# 安装指定版本
# npm i -D webpack@<version>
# 安装最新的体验版本 可能包含bug,不要⽤于⽣产环境
# npm i -D webpack@beta
# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli
npx webpack -v// npx帮助我们在项⽬中的node_modules⾥查找webpack

3. 默认配置

webpack 默认⽀持 JS 模块和 JSON 模块
⽀持CommonJS/ES moudule/AMD等模块类型
webpack4⽀持零配置使⽤,但是很弱，稍微复杂些的场景都需要额外扩展

3.2 默认配置

const path = require("path");
module.exports = {
 // 必填 webpack执⾏构建⼊⼝
 entry: "./src/index.js",
 output: {
 // 将所有依赖的模块合并输出到main.js
 filename: "main.js",
 // 输出⽂件的存放路径，必须是绝对路径
 path: path.resolve(__dirname, "./dist")
 }
};

3.1 例子

1.新建src/index.js、src/index.json、src/other.js
### index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2, 3));
### index.json
{
 "name": "JOSN"
}
### other.js
export function add(n1, n2) {
 return n1 + n2; 
}
2.npx webpack 执行构建
3.构建成功
    多出⼀个 dist ⽬录，⾥⾯有个 main.js ，这个⽂件是⼀个可执⾏的JavaScript⽂件，
  ⾥⾯包含webpackBootstrap启动函数

4.配置核心概念

零配置是很弱的，特定的需求需要⾃⼰进⾏配置
webpack 有默认的配置⽂件，叫 webpack.config.js，

使⽤默认的配置⽂件：webpack.config.js
不使⽤⾃定义配置⽂件：⽐如wpconfig.js，可以通过--config wpkconfig.js来指定 webpack 使⽤哪个配置⽂件来执⾏构建。

webpack.config.js配置基础结构

module.exports = {
 entry: "./src/index.js", //打包⼊⼝⽂件
 output: "./dist", //输出结构
 mode: "production", //打包环境
 module: {
 rules: [
     //loader模块处理
         {
         test: /\.css$/,
         use: "style-loader"
         }
     ]
 },
 plugins: [new HtmlWebpackPlugin()] //插件配置
};

4.1 entry

指定webpack打包⼊⼝⽂件:Webpack 执⾏构建的第⼀步将从 Entry 开始，可抽象成输⼊

  //单⼊⼝ SPA，本质是个字符串
  entry: {
    main: "./src/index.js",
  },
   // 相当于简写=
  entry: "./src/index.js",
   //多⼊⼝ entry是个对象
  entry: {
    index: "./src/index.js",
    login: "./src/login.js",
  },

4.2 output

打包转换后的⽂件输出到磁盘位置:输出结果，在 Webpack 经过⼀系列处理并得出最终想要的代码后输出结果。

  //单⼊⼝ SPA，本质是个字符串
  output: {
    filename: "bundle.js", //输出⽂件的名称
    path: path.resolve(__dirname, "dist"),//输出⽂件到磁盘的⽬录，必须是绝对路径
  },
  //多⼊⼝的处理
  output: {
    filename: "[name][chunkhash:8].js", //利⽤占位符，⽂件名称不重复
    path: path.resolve(__dirname, "dist"), 
  },

4.3 mode

设置mode可以⾃动触发webpack内置的函数，达到优化的效果
webpack 入门 - 图2

开发阶段的开启会有利于热更新的处理，识别哪个模块变化
⽣产阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能

4.4 module

模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。webpack 会从配置的 Entry开始递归找出所有依赖的模块。
当 webpack 处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的模块，使⽤什么loader来处理。
```
module:{
rules:[
{
  test:/\.xxx$/,//指定匹配规则
  use:{
    loader: 'xxx-load'//指定使⽤的loader
  }
}
]
}
```
4.5 loader
webpack 默认只⽀持 json 和js模块不⽀持不认识其他格式的模块。
webpack是模块打包⼯具，⽽模块不仅仅是js，还可以是css，图⽚或者其他格式，其他格式的模块处理，和处理⽅式就需要 loader 了

常见的loader：

style-loader
css-loader
less-loader
sass-loader
ts-loader //将Ts转换成js
babel-loader//转换ES6、7等js新特性语法
file-loader//处理图⽚⼦图
eslint-loader
...

4.6 plugin

plugin 可以在 webpack 运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念
扩展插件，在 webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。
作⽤于整个构建过程

常用的plugin:

html-webpack-plugin
clean-webpack-plugin
mini-css-extract-plugin

4.7 sourceMap

为了开发时，快速的定位问题
线上代码，我们有时候也会开启前端错误监控，快速的定位问题

源代码与打包后的代码的映射关系，通过sourceMap定位到源代码。

//在dev模式中，默认开启，关闭的话 可以在配置⽂件⾥
devtool:"none"

eval：速度最快,使⽤eval包裹模块代码,
source-map：产⽣ .map ⽂件外部产⽣错误代码的准确信息和位置
cheap: 较快，不包含列信息
module：第三⽅模块，包含loader的sourcemap（⽐如jsx to js ，babel的sourcemap）
inline：将 .map 作为DataURI嵌⼊，不单独⽣成 .map ⽂件

配置推荐：
devtool:"cheap-module-eval-source-map",// 开发环境配置
 // 线上不推荐开启
devtool:"cheap-module-source-map", // 线上⽣成配置

5. module/chunk/bundle关系

webpack 生态系统中的常用术语

webpack 中那些最易混淆的 5 个知识点

webpack 入门 - 图4

module 模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
chunk 代码块，一个 chunk 由多个模块组合而成，用于代码合并与分割。
bundle 输出束
- 一个 chunk 可以对应一个或多个module
- 一个 bundle 对应一个 chunk

6.核心工作原理

Webpack 打包的核心工作过程：

通过 Loader 处理特殊类型资源的加载，例如加载样式、图片；通过 Plugin 实现各种自动化的构建任务，例如自动压缩、自动发布。

webpack 启动后，会根据我们的配置，找到项目中的某个指定文件（一般这个文件都会是一个 JS 文件）作为入口。然后顺着入口文件中的代码，根据代码中出现的 import（ES Modules）或者是 require（CommonJS）之类的语句，解析推断出来这个文件所依赖的资源模块，然后再分别去解析每个资源模块的依赖，周而复始，最后形成整个项目中所有用到的文件之间的依赖关系树。

对于依赖模块中无法通过 JavaScript 代码表示的资源模块，例如图片或字体文件，一般的 Loader 会将它们单独作为资源文件拷贝到输出目录中，然后将这个资源文件所对应的访问路径作为这个模块的导出成员暴露给外部。

至于自定义插件机制它并不会影响 Webpack 的核心工作过程，只是 Webpack 为了提供一个强大的扩展能力，它为整个工作过程的每个环节都预制了一个钩子，也就是说我们可以通过插件往 Webpack 工作过程的任意环节植入一些自定义的任务，从而扩展 Webpack 打包功能以外的能力。

整体流程：

Webpack CLI 启动打包流程；载入 Webpack 核心模块，创建 Compiler 对象；
使用 Compiler 对象开始编译整个项目；
从入口文件开始，解析模块依赖，形成依赖关系树；
递归依赖树，将每个模块交给对应的 Loader 处理；
合并 Loader 处理完的结果，将打包结果输出到 dist 目录。

https://kaiwu.lagou.com/course/courseInfo.htm?courseId=88#/detail/pc?id=2265

多页面打包通用方案

动态获取 entry 和设置 html-webpack-plugin 数量
利⽤ glob.sync ：entry: glob.sync(path.join(__dirname, './src/*/index.js')),

https://www.npmjs.com/package/glob

module.exports = { 
    entry: { 
    index: './src/index/index.js', 
    search: './src/search/index.js ‘ 
    } 
};

webpack 入门