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

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

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

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

（一）安装与命令

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

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

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

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

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插件里，进行初始化变量

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

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

运行npm run webpack

编译成功后，即可查阅dist文件夹里面的index.html页面。结果如下：

（三）多页面应用配置

在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

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

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

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

更多文章请关注公众号