【Webpack】基本概念

是一种前端资源构建工具，一个静态模块打包器。
前端所有的资源文件（js/json/css/img/less/…）都会作为模块处理。
根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。
基本流程： 从入口文件引入（各种包、资源 === 静态模块） => 形成chunk(代码块) => 按不同的资源进行处理（打包）=> 输出bundle

安装依赖方式

npm install --save-dev webpack
npm install webpack@4.41.6 -D -g (@固定版本 -D 下载项目依赖， -g 全局下载)
npm install webpack-cli
npm install webpack-cli@3.3.11 -D -g

一、核心概念

1. Entry

入口（Entry）指示以哪个文件为入口进行分析打包，分析构建内部依赖图。

2. Output

打包后的资源bundles输出到哪里去，以及如何命名。

3. Loader（翻译官）

把浏览器不认识的东西转化为他能认识的东西。让Webpack能够去处理那些非JavaScript文件(Webpack自身只理解JavaScript)

4. Plugins

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

5. Mode

模式指示Webpack使用相应模式的配置。

• development 本地调试运行的环境
• production 能让代码优化上线运行的环境

二、常见名词解析

chunk

• 是Webpack打包过程中，一堆module的合集。(chunk是一些模块的封装类)
• Webpack配置中入口文件entry是chunk，如果我们有多个入口文件，可能会产出多条打包路径，一条路径就会形成一个chunk。
• 通过SplitChunks抽取出的公有代码，也是chunk（之后性能优化有详细解释）。
• 产生Chunk的三种途径
  1. entry入口
  2. 异步加载模块
  3. 代码分割（code spliting）

bundle

• webpack打包出来的代码文件, 也可以理解为对chunk编译/压缩打包等处理后的产出
• 大多数情况下，一个Chunk会生产一个Bundle。
• Chunk是过程中的代码块，Bundle是结果的代码块。

module

模块，在webpack眼里，任何可以被导入导出的文件都是一个模块

三者关系图

三、运行指令

1. 开发环境：
   webpack ./src/index.js -o ./build/built.js --mode=development

(!!非全局安装这个命令会报错)（webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境是开发环境）打包之后文件不会压缩，会很大

2. 生产环境:
   webpack ./src/index.js -o ./build/built.js --mode=production

（webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境是正式环境）打包之后文件会压缩，会变小

3. Webpack 能处理js/json 资源, 不能处理css/img等其他资源
4. 生产环境和开发环境 – 将es6模块化编译成浏览器能识别的模块化。
5. 生产环境比生产环境多一个压缩js代码。