模块化打包工具-初识Webpack

  • 模块化打包工具-初识Webpack已关闭评论
  • 73 次浏览
  • A+
所属分类:Web前端
摘要

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


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

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

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

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

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

  1. 模块打包:完成多个模块的打包,将多个模块的js文件打包到一个js里面。
  2. loader转换: 以webpack为例,可以使用loader完成格式的转换,改善兼容性问题
  3. 代码拆分:可以拆分不同模块的代码,没用到的代码,实现异步加载,渐进式加载
  4. 可以以模块化的方式载入各种类型的文件,比如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

这个可以看出,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。

模块化打包工具-初识Webpack

 以开发模式为例

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

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

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

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

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

模块化打包工具-初识Webpack

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

模块化打包工具-初识Webpack

3.4打包后的内容

想了解一下打包的过程,可以直接把前面的工作模式改成none,让他打包的时候不做额外处理,然后运行打包命令。

整体结构:最终的输出js文件在折叠后如下图所示,就是一个立即执行函数,函数接收一个参数modules,modules是一个数组

模块化打包工具-初识Webpack

 

函数参数 这个modules数组里的每个元素都是一个参数列表相同的函数,这每一个函数都是对应源代码里的一个模块,也就是说每个模块在打包后都会被包裹在这样一个函数中,而包裹函数这样的作法就直接实现了不同模块之间的私有作用域,这样不会产生变量冲突和污染

模块化打包工具-初识Webpack

立即执行函数的主体 对于webpack的工作模块,他首先检查了是否存在缓存,然后定义了一个__webpack_require__的方法,最后调用了这个方法,moudleId这个参数值是模块在之前的数组里的索引,处理第一个模块就传0,第二个传1......

模块化打包工具-初识Webpack

模块化打包工具-初识Webpack

 

 __webpack_require__方法内部,先是创建了module对象,然后调用了一开始立即执行函数的参数,并且传入了模块对象,exports对象,和__webpack_require__函数

 

模块化打包工具-初识Webpack

立即执行函数的参数的函数内部  调用了这个方法之后,就可以在模块的内部使用module.export去导出成员使用require去载入模块了

先是调用了__webpack_require__.r方法给exports对象加了一个es module的标记,然后执行__webpack_require__(1),也就是对这个模块导入的另外一个模块,进行相同的操作,让那个模块也可以在模块的内部使用module.export去导出成员使用require去载入模块了

 

 

模块化打包工具-初识Webpack

 

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中做一些配置

  1. 修改打包的入口文件为新建的css文件(只是尝试一下,一般推荐把js文件当作入口文件)
  2. 加入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里面

模块化打包工具-初识Webpack

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

模块化打包工具-初识Webpack

 

 

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文件夹下,那就一定加载不出来了

模块化打包工具-初识Webpack

我们打包后的结果在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代码

模块化打包工具-初识Webpack

 安装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           }         }       }     ]   } }