webpack 打包原理解析

文档

https://webpack.js.org/

1、webpack简介

webpack is a module bundler（模块打包工具）

Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递 归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中

是⼯程化、⾃动化思想在前端开发中的体现。

2、webpack 安装

2.1安装

# 安装最新的稳定版本
npm i -D webpack

# 安装指定版本
npm i -D webpack@<version>

# 安装最新的体验版本 可能包含bug,不要⽤于⽣产环境
npm i -D webpack@beta

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

2.2 检查

webpack -v // command not found 默认在全局环境中查找
npx webpack -v // npx帮助我们在项⽬中的node_modules⾥查找webpack
./node_modules/.bin/webpack -v //到当前的node_modules模块⾥指定webpack

3、配置基础结构

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

3.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"
}

3.2-output

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

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

3.3-mode

Mode⽤来指定当前的构建环境

• production
• development
• none
  设置mode可以⾃动触发webpack内置的函数，达到优化的效

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

3.4- loader

模块解析，模块转换器，⽤于把模块原内容按照需求转换成新内容。

webpack是模块打包⼯具，⽽模块不仅仅是js，还可以是css，图⽚或者其他格式 ，但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处理，和处理⽅式就需要 loader了

常⻅的loader：

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

3.5-module

模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。Webpack 会从配置的 Entry 开始递归找 出所有依赖的模块。 当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的 模块，使⽤什么loader来处理。

module:{
 rules:[
     {
         test:/\.xxx$/,//指定匹配规则
         use:{
         	loader: 'xxx-load'//指定使⽤的loader
         }
     }
 ]
}

• file-loader：处理静态资源模块
  原理是把打包⼊⼝中识别出的资源模块，移动到输出⽬录，并且返回⼀个地址名称
  使用场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬录，就可以使⽤file-loader来处理， txt，svg，csv，excel，图⽚资源
• url-loader:
  url-loader内部使⽤了file-loader,所以可以处理file-loader所有的事情，但是遇到jpg格式的模块， 会把该图⽚转换成base64格式字符串，并打包到js⾥。对⼩体积的图⽚⽐较合适，⼤图⽚不合适。

3.6-plugins

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

例如：HtmlWebpackPlugin

htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html 中 。

npm install --save-dev html-webpack-plugin

配置：

title: ⽤来⽣成⻚⾯的 title 元素
filename: 输出的 HTML ⽂件名，默认是 index.html, 也可以直接配置带有⼦⽬录。
template: 模板⽂件路径，⽀持加载器，⽐如 html!./index.html
inject: true | 'head' | 'body' | false ,注⼊所有的资源到特定的 template 或者
templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body
元素的底部，'head' 将放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML ⽂件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加⼀个唯⼀的 webpack 编译 hash 到所有包含的脚本和
CSS ⽂件，对于解除 cache 很有⽤。
cache: true | false，如果为 true, 这是默认值，仅仅在⽂件修改之后才会发布⽂件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写⼊到 HTML ⻚⾯中
chunks: 允许只添加某些块 (⽐如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到⻚⾯之前的排序⽅式，⽀持的值：'none' | 'default' |
{function}-default:'auto'
excludeChunks: 允许跳过某些块，(⽐如，跳过单元测试的块)

4、打包流程

1. 初始化参数阶段。
   这一步会从我们配置的webpack.config.js中读取到对应的配置参数和shell命令中传入的参数进行合并得到最终打包配置参数。
2. 开始编译准备阶段
   这一步我们会通过调用webpack()方法返回一个compiler方法，创建我们的compiler对象，并且注册各个Webpack Plugin。找到配置入口中的entry代码，调用compiler.run()方法进行编译。
3. 模块编译阶段
   从入口模块进行分析，调用匹配文件的loaders对文件进行处理。同时分析模块依赖的模块，递归进行模块编译工作。
4. 完成编译阶段
   在递归完成后，每个引用模块通过loaders处理完成同时得到模块之间的相互依赖关系。
5. 输出文件阶段
   整理模块依赖关系，同时将处理后的文件输出到ouput的磁盘目录中。