我知道的webpack前端打包工具(一)

时间:2021-09-17 18:37:58

这些天,毕业那点事,到现在终于能腾出空来了。

今天Eknow想总结的是自身所掌握的webpack知识以及对webpack的一些见解。

先来看一下github对webpack的相关介绍

我知道的webpack前端打包工具(一)

简单的来讲呢,就是webpack是js的一款打包工具,主要的特性是code Splitting(代码分割),可以将很多模块打包成较少的静态资源,同时它的核心是loaders,可以将各种格式文件,例如.vue,.jsx等,打包成浏览器可以识别的文件。

(一)安装与命令

要学习webpack之前,得需要掌握安装方式以及一些常用的命令。

我知道的webpack前端打包工具(一)

首先,在项目里进行局部安装,由于webpack4x版本有一些改动,之后会独立一篇文章进行比较总结。因此现在掌握这个命令即可。

接着,就可以使用webpack命令了。

1、使用命令webpack xx源文件  xx打包文件,就可以自动生成编译打包后的文件。

我知道的webpack前端打包工具(一)

我知道的webpack前端打包工具(一)

2、webpack对css的打包编译。首先,需要下载依赖包style-loader、css-loader(对样式的编译)

有2种方式进行webpack对css的使用:

第一,使用require引用css路径前,引入style-loader与css-loader。

第二,使用webpack的相关命令--module-bind对style-loader与css-loader的调用。

其他命令:

webpack hello.js hello.bundle.js --progress 显示打包的过程;

webpack hello.js hello.bundle.js --display-modules显示打包的模块;

webpack hello.js hello.bundle.js --display-resons 显示打包的原因。


(二)单页面应用配置

核心概念:entry入口,output输出,html-webpack-plugin(https://www.npmjs.com/package/html-webpack-plugin)。

entry设置单个入口或者多个入口起点,

output的path与filename属性分别对主文件以及入口起点的编译打包。

引用path模块对index.html以及js文件都打包在dist文件夹里面;pubicPath用于指定路径的静态资源。

编译打包的结果:

html-webpack-plugin对index.html进行优化处理。

首先,npm i 这个webpack的插件,

接着require赋值给一个变量,

之后,在plugins插件里,进行初始化变量

我知道的webpack前端打包工具(一)

在初始化中,可以配置多个参数以及自定义变量,例如inject;也可以进行自定义变量,如title、date等,在index.html页面中,像ejs模板引擎一样引用出来即可

我知道的webpack前端打包工具(一)

另外,在package.json文件里,对scripts进行webpack的配置。

我知道的webpack前端打包工具(一)

运行npm run webpack

我知道的webpack前端打包工具(一)

编译成功后,即可查阅dist文件夹里面的index.html页面。结果如下:我知道的webpack前端打包工具(一)

(三)多页面应用配置

在webpack.config.js的entry里,配置多个入口文件,例a.js,b.js,c.js文件。

而output对多个文件进行输出

核心的步骤,需要在plugins插件里面,进行多次htmlWebpackPlugin变量的初始化,以index.html作为模板文件,分别输出三个html页面。同时,使用excludeChunks属性对相应的js文件进行引用。

(四)性能优化

由于需要将打包的性能做到极致,因此需要将初始化的共同文件直接引用出来,减少http请求。调用webpack源码里面的compilation.assets,同时引用htmlWebpackPlugin里面的files对象,从而将main.js直接引用出来;另外通过遍历htmlWebpackPlugin.files.chunks,判断key值是否为main,从而进行引用各个页面所需要的不同js文件。

https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade

我知道的webpack前端打包工具(一)

此时,在dist文件夹下面的a.html,b.html,c.html里,将main.js的代码直接引入,同时调用相对应页面的js文件资源。


总结:到此,webpack基础的使用方式已经结束。这篇文章,主要分析了单页面应用与多页面应用的部分配置,以及对entry、output、plugin等概念进行运用。

另外,此webpack的版本是3x,4x版本在2月份已经有一些区别。

更多文章请关注公众号

我知道的webpack前端打包工具(一)