了解 Webpack（ 简介 ）

一、webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

---

二、核心概念

2.1 零配置

不创建配置文件进行打包，会用以下默认配置进行打包

const { resolve } = require("path")

module.exports = {
	entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: resolve(__dirname, "./dist")
  }
}

2.2 配置文件

默认为 webpack.config.js，可以进行自定义执行，详见下文

2.3 Entry

入口（Entry）指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图

2.4 Output

输出（Output）指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名

2.5 Mode

模式（Mode）指示 webpack 使用相应模式的配置

选项	描述	特点
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。	能让代码本地调试 运行的环境
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。	能让代码优化上线运行的环境

2.6 Loader

加载器（Loader），相当于翻译官， 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)

2.7 Plugins

插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

2.8 Chunk

代码片段

2.9 Bundle

输出的资源文件 ，就叫 bundle 文件
​
三者的区别
一个chunks对应至少一个模块
一个bundle对应一个chunks

---

三、环境搭建

4.x 以后要安装 webpack webpack-cli，缺一不可
webpack@4.41.6
webpack-cli@3.3.11

// 初始化生成package.json
npm init
// 全局安装 不推荐 版本号固定
npm install webpack@4.41.6 -g
npm install webpack-cli@3.3.11 -g
// 局部安装 推荐 开发环境依赖
npm install webpack@4.41.6 -D
npm install webpack-cli@3.3.11 -D

结论：

• webpack能处理js/json资源，不能处理css/img等其他资源
• 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
• 生产环境比开发环境多一个压缩js代码

---

四、配置及打包

在项目根目录创建 webpack.config.js 文件用来写配置代码，和src中的项目代码（基于js遵循ES6模块化规范）不同，因为是基于node，所以使用commonJs模块化规范
运行项目指令：

• webpack：手动打包，会输出打包文件，用于验证打包文件正确与否
• npx webpack-dev-server 自动打包，只会在内存中编译打包，不会输出打包文件

// package.json

{
  ......
  "scripts": {
    // "dev": "webpack", // 默认，按照 webpack.config.js 来配置
    "dev": "webpack --config ./webpack.aifisher.js", // 自定义，按照 webpack.aifisher.js 来配置，完成此功能的为 webpack-cli 依赖
     ......
  }
  ......
}