在 Node.js 中 Webpack 快速上手

一、Webpack 简介

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

打包工具解决的是前端整体的模块化，并不单指 JavaScript 模块化。
对于代码中有环境兼容问题的代码，可以在打包的过程当中，通过 模块加载器（Loader）进行编译转换。它还具备 代码拆分(Code Splitting)的能力，可以根据我们的需要去打包，不需要担心把所有的代码打包到一起，导致文件过大的问题 。只需要把初次运行必须的模块打包到一起，而对于其他的模块单独存放，等到应用工作过程当中，实际需要某个模块，然后再异步加载某个模块，从而实现增量加载或渐进加载。不用担心文件太碎，或太大的问题。

快速运行 webpack

1. 初始化项目 npm init --yes
2. 在开发环境安装 webpack npm i webpack webpack-cli -D
3. 快速使用 webpack 打包 npm run webpack

webpack的核心概念

• 入口(entry)
• 输出(output)
• loader(加载器) 专注实现资源模块的加载
• 插件(plugin) 解决项目中除了资源加载以外其它的自动化工作
• mode（模式）

二、入口（entry）

指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。

webpack 的打包入口 一般是 JavaScript。从某种程度来说，打包入口也就是 运行入口。

默认值是 ./src/index.js，可以通过 webpack.config.js 配置文件中配置 entry 属性，来指定一个（或多个）不同的入口起点。绝对路径。

module.exports = {
	entry: './src/main.js'
}

三、输出（output）

该属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。绝对路径。

const path = require('path')
module.exports = {
	entry: './src/main.js',
	output: {
		filename : 'bundle.js',
        path : path.join(__dirname, 'output')
	}
}

output 属性 内的 filename 指定 webpack bundle 的名称，path 指定 webpack bundle 的输出地址。

四、loader

Loader 是 实现 webpack 实现整个前端模块化的核心 。通过 Loader 就可以加载任何类型的资源。

webpack 只能理解 JavaScript 和 JSON 文件。对于其他资源例如 css、图片、或者其他的语法集，是没有办法加载的。这就需要对应的 loader 将资源转化，加载进行。

在 webpack 的配置中 loader 有两个属性：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。使用正则表达式匹配文件，不需要添加引号。
2. use 属性，表示进行转换时，应该使用哪个 loader。该属性内可以组合多个loader对文件进行加载，执行顺序从后往前。

在 webpack 中 将 loader 配置在 module.rules 属性内。rules数组就是loader用来的匹配和转换资源的规则数组。

// 在项目中安装 loader
npm i css-loader style-loader -D

const path = require('path')
module.exports = {
	module: {
   	 	rules: [
      		{
        		test: /.css$/,
        		use: [
         		 'style-loader',
          	     'css-loader'
       			 ]
      		}
    	]
  }
}

五、插件(plugin)

插件的作用范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，先通过 npm 安装，再到 webpack.config.js 文件中引入，进行配置。方法如下：

// 安装 html-webpack-plugin 该插件动态生成应用所需要的 html 文件
npm i html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
	plugins: [
   		new HtmlWebpackPlugin({
    		template: './src/index.html' // 指定使用的 模板
    	})
  ]
};

六、mode（模式）

mode 属性有三种取值，分别是 production、development 和 none。其默认值为 production。

1. production 生产模式下，Webpack 会自动优化打包结果；代码会进行压缩，比development的文件小。
2. development 开发模式下，Webpack 会自动优化打包速度，添加一些调试过程中的辅助；一些没有依赖的方法 变量 文件会保留，production则会移除。
3. none 模式下，Webpack 就是运行最原始的打包，不做任何额外处理；

module.exports = {
	mode: "none"
};

七、webpack 核心工作原理

Webpack 会根据 我们的配置找到其中的一个文件作为打包的入口，然后顺着入口文件当中的代码，根据代码中出现的 import 和 require 语句，然后解析推断出来这个文件所依赖的资源模块，然后分别去解析每个资源模块对应的依赖，最后就形成了整个项目中所有用到文件之间的依赖关系的依赖树(dependency graph)。有了这个依赖关系树过后，webpack会递归这个依赖树，然后找到每个节点对应的资源文件，最后根据配置文件中的 rules 属性去找到这个模块所对应的加载器，然后交给对应的加载器去加载这个模块，最后会将加载到的结果放入到 bundle.js(也就是打包结果)中，从而实现整个项目的打包。整个过程当中 Loader 机制起到了重要的作用。