webpack 初识

webpack 构建流程

• 初始化参数，从配置文件和 shell 语句中读到的参数合并，得到最后的参数
• 开始编译：用合并得到的参数初始化 complier 对象，加载所有配置的插件，执行 run 方法开始编译
• 确定入口，通过 entry 找到入口文件
• 编译模块，从入口文件出发，调用所有配置的 loader 对模块进行解析翻译，递归找到该模块依赖的模块进行处理
• 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
• 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 chunk，在把每个 chunk 转换成一个单独的文件加载到输出列表（这一步是修改输出内容的最后机会）
• 输出完成，根据配置中输出的路径和文件名，把内容写到文件系统中
• 在以上过程中，webpack会在特定的时间点广播出特定的事件，插件在监听事件后会执行特定的逻辑，改变 webpack 的运行结果

---

简单地说分三步走：

• 初始化：启动构建，读取与合并配置参数，加载 plugin，实例化 Compilier 对象
• 编译：从 entry 出发，针对每个 module 串行调用对应的 loader 去翻译文件的内容，递归找出所有模块依赖的模块进行编译处理
• 输出：将编译后的 module 组合成 chunk，将 chunk 转换成文件，输出到文件系统中

webpack 就是一个模块打包工具。

打包工具要解决的问题

• 文件依赖管理
  基于现在的前端开发基本上都是模块化开发，打包工具首先就是要梳理文件之间的依赖关系
• 资源加载管理
  web 的本质就是 html js css 的组合，文件的加载顺序 / 加载时机和加载的数量比如合并或者拆分也是打包工具要解决的问题
• 效率与优化管理
  尽可能的减少机械化 Coding 和优化页面效果，是打包工具的魅力所在

webpack 的工作原理

webpack 处理文件的过程可以分为两个维度：1.文件的关系处理-加载顺序，主要通过文件和模块的标记方法来实现。2.文件的内容处理-代码优化，主要通过 loader 和 plugins 来处理

六个核心概念

• entry 入口 - 这是 webpack 构建的第一步，可以理解为输入
• module 模块 - 在 webpack 中一切皆模块，一个模块即为一个文件，webpack 会从 entry 开始递归找出所有依赖的模块
• chunk 代码块，一个 chunk 由多个 module 组合而成，它用于代码的合并与分割
• loader 模块转换器，告诉 webpack 非 js 文件该如何打包
• plugins 插件，在 webpack 构建过程的特定时机注入扩展逻辑用来改变或者优化构建的结果
• output 输出结果

module chunk bundle 的区别、关系

• module 逻辑代码文件，一个文件就可以是一个模块
• chunk webpack 根据文件的引用关系生成 chunk
• bubdle webpack 处理好 chunk 文件后，最终生成浏览器可以直接运行的 bundle，一个 bundle 可能对应一个 chunk 也可能是多个 chunk 组合起来的

filename 和 chunkFilename

• filename 就是对应 entry 入口文件，经过 webpack 打包之后输出的文件名
• chunkFilename 指的是未被列在 entry 中，却又需要被打包出来的 chunk 文件的名称，一般来说指的就是需要懒加载的代码

webpackPrefetch、webpackPreload 和 webpackChunkName 是干什么的？

• webpackChunkName 为预加载的文件取别名
• webpackPrefetch 会在父 chunk 加载文件后，闲时进行加载
• webpackPreload 会在父 chunk 中立即执行与其并行加载

hash、chunkhash、contenthash

hash 一般是结合 CDN 缓存来使用的。如果文件内容改变的话那么对应文件的 hash 值也会改变，对应 HTML 引用的 URL 地址也会改变，触发 CDN 服务器从源服务器上拉取对应数据，进而更新本地缓存

• hash 是项目的哈希值，项目如果有所改动 hash 一定会变，牵涉太大。即 hash 的计算与整个的项目构建有关
• chunkHash 根据不同的入口文件进行依赖解析，构建对应的 chunk 生成对应的 chunkHash。即 chunkHash 的计算与同一 chunk 内容相关
• contentHash 比如 index.js 和 index.css 同为一个 chunk，一个改变那么他们两个的 chunkHash 都会改变，都去更新也会造成资源上的浪费，而 contentHash 会根据文件内容构建出唯一的 hash 文件的内容不变 hash 就不变。即 contentHash 的计算与文件的内容本身相关

source-map

它就是一份源码和转换后代码的映射文件
devtool:cheap-module-eval-source-map

ES module 模块引入方式

// 引入
import Protein from './protein.js';
// 导出
export default Protein;

CommonJS 模块引入规范

// 引入
const Protein = require('./protein.js');
// 导出
module.exports = Protein;

项目中安装 webpack

// 安装 webpack
npm init -y;
npm install webpack webpack-cli -D;

基础写法

const path = require('path');

module.exports = {
    mode: 'development', // 打包模式
    // entry: './src/index.js',
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        // filename: 'main.js',
        // publicPath: 'http://cdn.com.cn', // 从 cdn 引入
        filename: '[name].[chunkhash:8].min.js', // 对应 entry 生成的文件
        chunkFilename: '[name].[chunkhash].chunk.js', // 对应 entry 未列入，但是需要异步引入的文件
        path: path.resolve(__dirname, 'dist')
    },
}