前端必备技能 webpack - 1. webpack简介

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。
 
点这里查看 webpack 系列文章目录
 
博客中的代码位于 码云Git仓库，如有需要可自行前往下载。

前端必备技能 webpack - 1. webpack简介

一、 webpack 是什么？

  webpack 是一个前端资源构建工具，一个静态模块打包器。接下来我们一一分析其中的含义：

1.1 什么是构建工具？

  我们知道一个项目中可能会应用到各种各样的技术，例如使用 sass 来编译 css 文件，js 代码要进行压缩，引用图片的话也要考虑是否需要压缩图片大小等等，每一件事情都需要不同的工具来进行处理。

  这一个个的小工具，在过去需要我们一个一个的进行处理维护，非常麻烦。后来前端提出了一个概念，就是我们来找一个大的工具，在这些小工具的功能都给包含进去，这时候，我们只需要维护这个大工具，就能把这些事情全部做好，而这个大工具，就被我们称为构建工具。

1.2 什么是模块？

  前端的模块规范主要可以分为四种：

• CommonJS
    CommonJS 不适用于浏览器端，所以主要运用于服务端中，而 node.js 的模块系统，就是参照 CommonJS 规范实现的。一个单独的文件就是一个模块，每一个模块都是一个单独的作用域，通过 module.export 导出模块， require 引入模块；
• AMD
    AMD 是 Asynchronous Module Definition 的缩写，是异步模块定义的意思，代表作品是 RequireJS，主要是为了解决 require 是同步加载的问题；
• CMD
    CMD 是 Common Module Definition 的缩写，是通用模块定义的意思，是阿里技术团队制定的，代表作品是 SeaJS，与 requireJS 解决了同样问题，只是运行机制不同；
• ES6
    ES6 中每一个文件就是一个模块，在文件中定义的变量，函数，对象在外部是无法获取的。想要访问需要使用 export 来对其进行输出，在通过 import 来引入；

  模块化概念的引入主要是为了防止变量污染。

1.3 什么是打包？

  比如我们在项目里面使用 SCSS 来编写 CSS，那么我们在代码发布前，需要有一个编译转化的过程，将 SCSS 文件编译成 CSS，并且进行合并压缩等操作。这个过程，就是打包。

二、webpack 基本工作流程

  我们在工作开发中，常常会将 css 等资源通过 link 标签引入到一个 html 页面中，与之类似，使用 webpack 我们则需要将这些资源通过 import 引入到一个 js 文件中，如下所示：

// index.js
// 引入 css 资源
import "./test.less";
// 引入 js 资源
import "./test.js";
// import other resources
// ... ...

  我们在 index.js 中引入了这些资源，我们可以尝试下使用 script 标签将这个文件引入到页面里运行一下，浏览器会抛出下方错误：

Uncaught SyntaxError: Cannot use import statement outside a module

  这是因为浏览器并不支持 ES6 的模块化语法。所有这个时候，我们可以将它交给构建工具 webpack 来处理，webpack 则会以 index.js 为入口，记录好其中每一个 import 进来的文件，将每一个文件视为一个依赖项，从而形成一个依赖结构的关系图，最终将这个 index.js 所需要的的内容，全部输出到一个 chunk 文件，chunk 翻译成中文，就是（代码）块的意思。

  接下来 webpack 会将 less 、ES6 这种浏览器不能直接识别的文件，转化为浏览器可以识别的文件和语法，最终将这些处理好的文件输出出去，这些输出的东西，就叫做 bundle 。

  根据入口文件（index.js）的依赖关系，将相关的文件全部引入进来，形成 chunk 代码块，然后根据不同的资源进行不同的处理，最终输出为可以供浏览器直接使用的 bundle 文件。

  我们可以将 webpack 的工作流程看成下图五步：

  以上就是 webpack 大概的工作流程，省略掉了前期读取配置文件、编译和打包中的编译等阶段的具体内容。

---

  借用 webpack 官网的一张图，在 webpack 看来，无论采用何种语法、模板，最终都会转化为标准的，可供浏览器直接解析的资源文件，前端的所有资源文件 Img || CSS || JS 等资源都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

三、 webpack 五个核心概念

3.1 入口 Entry

  入口 Entry 指定 webpack 应该以那个文件为起点来构建其内部依赖图。进入入口起点后，webpack 会找出所有与入口文件有关系的模块和库。

// webpack.config.js
module.exports = {
  entry: './src/index.js'
};

3.2 出口 Output

  出口 Output 指定 webpack 打包完成后的资源 bundles 的输出路径及如何命名方式等。

// webpack.config.js
const path = require('path');
module.exports = {
	output: {
		 // 输出时一般会引入 node 中的 path 模块来确保输出路径的正确性
		 path: path.resolve(__dirname, "dist"), 
	}
};

3.3 预处理 loader

  预处理 loader 指定 webpack 处理非 js 文件的方式，webpack 本身只能处理 js 资源，借助 loader 可以将相应资源转换为 webpack 可以处理的 js 模块。loader 有两个重点属性：

• test 用于标识出应该被对应的 loader 进行转换的某个或某些文件；
• use 表示进行转换时，应该使用哪个 loader；

// webpack.config.js
const path = require('path');
module.exports = {
	// loader
	module: {
		// 详细的 loader 配置
		rules: [
			{ 
				// 通过正则表达式匹配相应文件
				test: /\.css$/, 
				// 使用那些 loader 处理匹配到的文件
				use: [
					"style-loader",
					"css-loader"
				]
			}
		]
	}
};

3.4 插件 plugins

  loader 的作用只是将 webpakc 不能识别的资源转换为可识别资源，但如果想要进行压缩等操作，需要借助插件 plugins 。plugins 可以帮助我们执行范围更广的任务，从打包优化和压缩，一直到重新定义环境中的变量等等。

  想要使用一个插件，需要先安装对应的插件，之后通过 require() 将插件引入进来，然后通过操作符 new 来创建插件的一个实例对象，最后将这个实例添加到 plugins 数组中，多数插件可以通过 option 来定义相关的配置。

// webpack.config.js
// 通过 npm 安装该插件，该插件用于处理 html 资源
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
	plugins: [
		new HtmlWebpackPlugin({template: './src/index.html'})
	]
};

3.5 模式 mode

  模式分为开发模式 development 和生产模式 production。通过设置 mode 属性，可以启用相应模式下的 webpack 。简单来说 development 的配置会相对简单一点，因为在开发模式下，我们只要能保证代码可以运行即可；production 的配置会相对复杂一点，因为我们的项目在上线后，要考虑代码图片的压缩，兼容性等问题，还要不断的进行优化以保证。

// webpack.config.js
module.exports = {
	mode: 'development',
};

  webpack.config.js 是 webpack 的配置文件，可以在其中配置相应的属性来决定如何使用 webpack。

四、开发服务器 devServer

  我们可以每次更改代码需要借助 webpack 重新打包才能查看到我们修改后的代码，这对开发来说十分的不方便。这时候吗，我们可以借助 devServer 来解决这个问题，帮助我们自动的编译打包，自动刷新浏览器。

  执行以下命名在项目中安装 devServer ：

npm i webpack-dev-server -D

  devServer 的启动指令：

npx webpack-dev-server

  下方是关于 devServer 的一些基本配置，更多的配置项可以参考 webpack官网 - 开发中 Server(devServer)。

// webpack.config.js
const path = require('path');
module.exports = {	
	// ... ...
	// 开发服务器 devServer 只能在内存中编译打包，不会生成本地文件
	devServer:{
		// 指定要运行的项目代码路径  打包后的代码路径
		contentBase: resolve(__dirname, "dist"),
		// 监听 contentBase 目录下的文件 当文件发生变化时重新加载浏览器
		watchContentBse: true,
		
		/*
		 *  proxy 在开发中是一个炒鸡重要属性
		 *  它可以作为服务器代理 帮助我们解决跨域问题
		*/ 
		
		proxy: {
			// 当监听到当前项目中发送了 "/api/xxx" 的请求后 会将请求转发到 target 所配置的路径中
			// 转发到 http://baidu.com/zuul/xxx
			"/api": {
				// 指定代理路径
				target: "http://baidu.com/",
				// 重写路径  将 api 替换成 zuul
				pathRewrite:{
					"^/api": "/zuul"
				}
			}
		},
		// 自动打开（默认）浏览器
		open: true
		// 指定项目运行的端口号
		port: 9527,
		// 启动 gzip 压缩 让代码体积更小 运行速度更快
		compress: true,
		// 启用安静模式 减少控制台打印信息 
		quiet: true
	}
};

以上就是一些关于 webpack 的简单介绍，更多的内容我们在后面的学习中来一点点的了解，下一篇： webpack 环境安装。

---

  感谢大家的观看，点赞和收藏，我们下篇博客再见。

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。
转载请附带作者信息及出处。您的评论和关注是我更新的动力!

下面是我的个人微信公众号，我会在里面定期更新前端的相关技术文章，欢迎大家前来讨论学习。如果有什么问题需要老王帮忙或者想看关于某个主题的文章，也可以通过留言等方式来联系老王。

都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。