这些天，毕业那点事，到现在终于能腾出空来了。
今天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月份已经有一些区别。
更多文章请关注公众号
