《Webpack 打包工具原理 学习笔记》

---

webpack 简介

个人博客地址如下：

webpack官方文档

模块打包器（串行构建工具）

webpack 打包工具 ；合并文件（减少二次请求）、压缩文件（提高加载速度）、精灵图（减少二次请求）、图片的 base64 编码（和html一起下载）

webpack 解决各个包之间的复杂依赖关系，是前端的一个项目构建工具，它是基于 Node.js 开发

打包方法：执行 webpack@3.8.1 要打包的文件路径 打包好的输出文件路径

常用命令 ： npm run dev （此命令在 package.json 中配置）

可以处理js文件之间的相互依赖关系；处理 js 兼容问题；

• javascript应用程序(包括 资源文件 ，对模块进行静态分析，生成静态资源文件)的静态模块打包工具(module bundler)
• 递归处理应用程序(构建依赖关系图dependency graph)
• 事件流的处理机制(保证了插件的有序性,使得整个系统扩展性很好)
• 插件管理者
• 实现插件管理的核心 ---- Tapable

---

Tapable

• 本身是一个库

webpack 通过 Tapable 来组织这条复杂的生产线

---

webpack.config.js常用属性

//入口entry（要打包的文件路径）和出口output（打包好的文件路径）
const path = require('path');

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output:{
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'//指定输出的文件的名称
    }
}
//执行webpack ...进行打包
path.resolve();
mode:  ''   设置环境

---

Entry(entry point)

入口、指示webpack应该使用哪个模块来作为构建内部依赖图的开始; 进入入口起点后,webpack 会找出有哪些模块和库是与入口起点（直接和间接）依赖的

支持有多个入口…

---

Output

输出、告诉webpack在哪儿输出bundles，以及命名，默认值为./dist

支持输出多个 bundles

---

Module

模块, 在 Webpack 里一切皆模块,一个模块对应着一个文件

---

Chunk

代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割

---

Loader

loader能处理非JS文件（webpack自身只能解析JS /webpack 自身只理解 JavaScript(只能把ES6模块化翻译成ES5)、JSON）

当需要加载其他类型的文件（模块），可以使用对应的 loader 进行转换/加载

Loader ----也是JS模块

也是一个函数，接受源文件作为参数，返回转换的结果

一般以 ***-loader 方式命名

---

Plugin

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

通过插件实现更多的功能

---

Mode

模式，有生产模式production和开发模式development

---

webpack 配置文件

配置文件（默认）是 webpack.config.js：是一个模块，返回一个json格式的对象

---

项目启动流程

初始化项目 : npm init

安装webpack; 安装方式：全局安装/本地安装

webpack 全局安装：npm install webpack webpack-cli -g

webpack 本地安装： npm install webpack webpack-cli -D

cnpm i webpack@3.8.1 -D ( 淘宝npm镜像)

基础案例代码如下：

const path = require('path');

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output:{
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'//指定输出的文件的名称
    }
}

执行 webpack 编译打包，运行效果图：

生成的文件夹 dist

文件夹dist 内打包生成的JS文件

---

webpack-dev-server的使用

使用 webpack-dev-server（@2.9.3）这个工具，来实现自动打包编译的功能

安装

运行 npm i webpack-dev-server@2.9.3 -D安装( 全局安装 )

---

使用方式

在 package.json 中 进行配置

代码如下：

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
// 执行命令 npm run dev 即可

// --open(代表打开浏览器)

// --port 3000（配置端口号）

// --contentBase src（配置根路径为src）

// --hot(无刷新重载,打补丁, 热更新, 即代码修改后, 浏览器会自动同步更新而不需要用户手动更新)

// --host 192.168.1.1  （设置主机地址）

// 在webpack中带 s 结尾的一般是数组

或者 在webpack.config.js中设置：

代码如下：

devServer: {
	contentBase: 'src',
	open: true,
	port: 3000
}

---

遇到的问题

output.filename’ is required, either in config file or as --output-filename

分析原因：没有指定输出的文件的名称

未知的属性 mode

应该这样设置：