在上一篇文章中提到的ES Module可以帮助开发者更好地组织代码，完成js文件的模块化，基本解决了模块化的问题，但是实际开发中仅仅完成js文件的模块化是不够的，尤其是面对一个较为庞大的工程项目的时候，主要仍有以下几个问题需要解决：
前2个问题都可以通过一些插件来解决，但是第3个问题支持多种文件就比较复杂，不太好处理，这时就需要使用到模块化打包工具。
打包工具解决的是前端整体的模块化，不只是局限于js的模块化
安装webpack
npm install webpack webpack-cli
最简单使用，文件结构如下，项目里只有一个index.html和一个src文件夹，src文件夹里有2个js文件
project
├── index.html
└── src
├── index.js
└── heading.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack - 快速上手</title>
</head>
<body>
<script type="module" src="./src/index.js"></script>
</body>
</html>
然后在项目根目录（project文件夹）下打开cmd窗口，输入npx webpack，就已经完成了打包，此时项目的根目录下多出一个dist文件夹，里面有一个main.js文件，将main.js引入后到html后网页功能一切正常使用
这个可以看出，webpack已经完成了打包，也就是把原本的2个模块，打包成了1个js文件来输出
在项目的根目录下添加webpack.config.js文件，这就是webpack的配置文件，这是一个运行在node环境下的js文件，所以需要使用CommonJS规范去编写代码。
最基本的配置如下，在配置文件里规定打包的入口，输出的地址和文件名
const path = require('path')
module.exports = {
entry: './src/main.js', //指定打包入口文件的路径
output: {
filename: 'bundle.js', //输出的文件名
path: path.join(__dirname, 'output') //打包完后输出的路径
}
}
在之前的打包过程中，虽然可以正常打包，但是会有一个警告，显示没有设置mode配置项，并且自动将mode设置为production。想要配置工作模式就需要去webpack.config.js文件去配置一个mode属性，这个属性有三种取值，分别是 production、development 和 none。
以开发模式为例
const path = require('path')
module.exports = {
mode:'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
}
}
不同的工作模式会有不同的打包方式
同一个简单项目，在生产和开发模式下打包出来的js文件对比
生产模式只有短短两行代码，并且做了对应的压缩和优化处理
开发模式的代码直截图了一小部分，整个代码较长，加入了许多调试相关的内容，但是也更方便阅读
想了解一下打包的过程，可以直接把前面的工作模式改成none，让他打包的时候不做额外处理，然后运行打包命令。
整体结构：最终的输出js文件在折叠后如下图所示，就是一个立即执行函数，函数接收一个参数modules，modules是一个数组
函数参数 这个modules数组里的每个元素都是一个参数列表相同的函数，这每一个函数都是对应源代码里的一个模块，也就是说每个模块在打包后都会被包裹在这样一个函数中，而包裹函数这样的作法就直接实现了不同模块之间的私有作用域，这样不会产生变量冲突和污染
立即执行函数的主体 对于webpack的工作模块，他首先检查了是否存在缓存，然后定义了一个__webpack_require__的方法，最后调用了这个方法，moudleId这个参数值是模块在之前的数组里的索引，处理第一个模块就传0，第二个传1......
__webpack_require__方法内部，先是创建了module对象，然后调用了一开始立即执行函数的参数，并且传入了模块对象，exports对象，和__webpack_require__函数
立即执行函数的参数的函数内部 调用了这个方法之后，就可以在模块的内部使用module.export去导出成员使用require去载入模块了
先是调用了__webpack_require__.r方法给exports对象加了一个es module的标记，然后执行__webpack_require__（1），也就是对这个模块导入的另外一个模块，进行相同的操作，让那个模块也可以在模块的内部使用module.export去导出成员使用require去载入模块了
webpack是整个前端项目的模块化打包工具，也有打包css的能力，但是默认的loader只支持js的加载，所以这就需要使用到css-loader和style-loader
安装css-loader
npm i css-loader style-loader
安装完后先在src文件夹下新建一个css文件，然后写点最简单的改变背景色代码，要把css加载到html里需要在webpack.config.js中做一些配置
运行打包命令后可以看到bundle.js里已经有对应的代码了，css-loader将css文件变成了字符串并且push进了一个数组，然后再通过style-loader创建了对应的style标签插入了html里面
整个背景都已经变成红色，说明css已经被成功加载
刚才加载css文件的时候修改了打包的入口文件把js文件改成了css文件，但是一般都会把入口文件设置成js文件，然后通过import的方式去引入css或者图片文件，虽然看起来的确繁琐，但是这也体现了所有资源的引入都依赖代码这个思想
import createHeading from './heading.js'
import './index.css'
const heading = createHeading()
console.log(111)
在webpack.config.js的配置里入口文件仍然设置为index.js
const path = require('path')
module.exports = {
mode: 'none',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
use: [
'style-loader',
'css-loader'
],
test: /.css$/
}
]
}
}
除了css文件，还有图片文件也需要引入js，这里有一个创建图片并且添加进html的功能
import createHeading from './heading.js'
import './main.css'
import icon from './icon.png'
const heading = createHeading()
document.body.append(heading)
const img = new Image()
img.src = icon
document.body.append(img)
此时需要用到file-loader，需要先安装file-loader，然后配置对应的loader规则（在配置文件的rules数组里加一项针对file-loader的配置项）
npm install file-loader
除了file-loader，还需要在output配置项里加入一个publicPath属性，这个属性表示打包后的内容在项目的哪个位置，默认值是空字符串，也就是说webpack会默认认为它打包好的内容会放在网站的根目录下，然而实际上根据我们的文件结构，并没有直接放在网站根目录下。
网站的根目录是index.html所在的外层，而打包的内容全在dist目录下（dist目录下也没有html文件）
直接使用默认值会导致图片路径加载的错误，它会在index.html所在的文件夹里寻找图片文件，然而图片的真实路径是在dist文件夹下，那就一定加载不出来了
我们打包后的结果在dist文件夹下，所以publicPath就写dist/。
const path = require('path')
module.exports = {
mode: 'none',
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: 'dist/'
},
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.png$/,
use: 'file-loader'
}
]
}
}
处理图片等文件的时候，可以使用dataurl来减少发送请求的次数，提升网站的性能。dataurl里面就直接写了一个文件的内容，像图片就通过base64编码直接写在里面了，而html则是写了html代码
安装url-loader
npm install url-loader
配值对应的规则，把use从原来的字符串换成一个对象，加入loader和limit属性，表示小于10KB的png图片，直接通过url-loader把它转换成base64编码格式的图片，而大于10KB的图片，url-loader会自动调用file-loader把它复制到dist文件夹下，并且引入，所以使用url-loader的时候，必须要有file-loader
const path = require('path')
module.exports = {
mode: 'none',
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: 'dist/'
},
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.png$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024 // 10 KB
}
}
}
]
}
}