模块化打包工具-初识Webpack

2023-09-27 20:43 由 Chenkai_Zhou 发表于 #前端开发

1. 为什么需要模块化打包工具

在上一篇文章中提到的ES Module可以帮助开发者更好地组织代码，完成js文件的模块化，基本解决了模块化的问题，但是实际开发中仅仅完成js文件的模块化是不够的，尤其是面对一个较为庞大的工程项目的时候，主要仍有以下几个问题需要解决：

ES Module是ES6新语法，一些老的浏览器不支持
每个模块对应一个script标签，模块划分过于细致的时候，网络请求次数多，页面会卡顿。（在开发过程中，划分多个模块是有益于代码组织的，但是生产运行的时候，不需要这么多模块，过多的模块反而会影响页面加载效率）
不光JS文件需要模块化，其他不同种类的资源（包括css文件等）都要完成模块化

前2个问题都可以通过一些插件来解决，但是第3个问题支持多种文件就比较复杂，不太好处理，这时就需要使用到模块化打包工具。

2.模块化打包工具的功能

模块打包：完成多个模块的打包，将多个模块的js文件打包到一个js里面。
loader转换：以webpack为例，可以使用loader完成格式的转换，改善兼容性问题
代码拆分：可以拆分不同模块的代码，没用到的代码，实现异步加载，渐进式加载
可以以模块化的方式载入各种类型的文件，比如import一个css文件

打包工具解决的是前端整体的模块化，不只是局限于js的模块化

3. Webpack尝试

3.1安装与基本使用

安装webpack

npm install webpack webpack-cli

最简单使用，文件结构如下，项目里只有一个index.html和一个src文件夹，src文件夹里有2个js文件

project
├── index.html
└── src
    ├── index.js
    └── heading.js

index.html里内容如下，只有一句，就是以模块化的方式引入了index.js，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文件来输出

3.2配置文件

在项目的根目录下添加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') //打包完后输出的路径
  }
}

3.3工作模式

在之前的打包过程中，虽然可以正常打包，但是会有一个警告，显示没有设置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')
    }
}

不同的工作模式会有不同的打包方式

生产模式下，Webpack 会自动优化打包结果；
开发模式下，Webpack 会自动优化打包速度，添加一些调试过程中的辅助；
None 模式下，Webpack 就是运行最原始的打包，不做任何额外处理；

同一个简单项目，在生产和开发模式下打包出来的js文件对比

生产模式只有短短两行代码，并且做了对应的压缩和优化处理

开发模式的代码直截图了一小部分，整个代码较长，加入了许多调试相关的内容，但是也更方便阅读

3.4打包后的内容

想了解一下打包的过程，可以直接把前面的工作模式改成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去载入模块了

3.4加载css文件

webpack是整个前端项目的模块化打包工具，也有打包css的能力，但是默认的loader只支持js的加载，所以这就需要使用到css-loader和style-loader

安装css-loader

npm i css-loader style-loader

安装完后先在src文件夹下新建一个css文件，然后写点最简单的改变背景色代码，要把css加载到html里需要在webpack.config.js中做一些配置

修改打包的入口文件为新建的css文件（只是尝试一下，一般推荐把js文件当作入口文件）
加入module属性，module属性是一个对象，在module里加入loader的匹配规则

const path = require('path')

module.exports = {

mode: 'none',

entry: './src/index.css',

output: {

filename: 'bundle.js',

path: path.join(__dirname, 'dist')

module: {

rules: [

{

use: [

'style-loader',

'css-loader'

test: /.css$/, //以.css结尾的文件用这些loader去处理

}

]

}

运行打包命令后可以看到bundle.js里已经有对应的代码了，css-loader将css文件变成了字符串并且push进了一个数组，然后再通过style-loader创建了对应的style标签插入了html里面

整个背景都已经变成红色，说明css已经被成功加载

3.4webpack加载资源文件

打包入口

刚才加载css文件的时候修改了打包的入口文件把js文件改成了css文件，但是一般都会把入口文件设置成js文件，然后通过import的方式去引入css或者图片文件，虽然看起来的确繁琐，但是这也体现了所有资源的引入都依赖代码这个思想

index.js

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$/
            }
        ]
    }
}

设置publicPath

除了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来减少发送请求的次数，提升网站的性能。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
          }
        }
      }
    ]
  }
}