wepack4+plugins+loaders项目复盘总结(上)

第一次使用webpack时，被其繁杂的配置弄的焦头烂额，但是打过多次交道后，慢慢的也变的熟络起来，这一次复盘就来根据查询加检验的结果来总结一下；

一、webpack4安装

项目使用是的webpack4，版本4与之前版本的区别在于，可以不再依赖配置文件，但其仍然是高度可配置的；虽然主打零配置，但是项目中所使用的plugins/loaders仍然需要配置的，所以暂时还是脱离不了webpack.config.js的；

在4之前的版本中，webpack与webpack-cli是放在同一个包中的，我们直接通过npm安装webpack就好；但是在webpack4中，已经将webpack与webpack-cli分在两个包中，我们需要分别安装，另外，若只是本地安装webpack-cli，我们的webpack命令在项目中是无效的，所以需要将webpack-cli包进行全局安装，或本地安装后进入node_modules/webpack/bin文件中运行webpack命令；

二、webpack4的配置

先说说零配置吧，这应该说是版本4的一个卖点吧。其实这也是在项目复盘后才知道的一个点；这里我们简单说，如果详细看的话移步至此https://www.html.cn/archives/9436，我个人觉的这篇文章很棒，帮我理清了项目中用到的工具，同时展示了webpack4的新特性；

首先是entryPoint&outputPoint，零配置下entryPoint默认为./src/index.js，outputPoint默认为./dist/main.js；如果要覆盖的话，可以在package.json的scripts内配置入口与出口文件；如下图，自定义文件路径

其次还有一点就是关于webpack4新增的devopment(开发)与production(生产)两种模式，如果不设置的话就会在控制台输出警告，所以为了消除警告配置一下也好；

下面来说一下怎么配置以及配置两种mode的区别，若还是没有配置文件怎么办，仍然在package.json文件的scripts中进行配置如下图：

若需要在配置文件中配置，若下图，直接在配置文件中添加mode属性即可；

production(生产模式):进行了压缩、作用域提升等优化；

development(开发模式):针对速度进行了优化，但提供的是不压缩的包；

这里还要提一点，若在开发中将mode设置为production会造成webpack-dev-server热更新缓慢，第一次使用时混沌的设置了production，更改文字颜色需要半分钟，现在实测依然如此，具体仍旧原因未知；

零配置说完了，再来说说增加配置文件后的配置项，其实也没什么好说的了，只剩下在配置文件中覆盖默认entryPoint&outputPoint，配置如下图，也没什么好解释的；

三、webpack-dev-server的配置

webpack-dev-server工具实现了对文件自动打包编译的功能，但将生成的文件存放在根目录下的内存中，所以在物理磁盘是不可见，所以在开发中更改代码能够更快的查看效果；另外在内存中生成的文件名为main.js（网上基本都是bundle.js，但本项目中生成的确实是main.js,也没有找到可配置项）

webpack-dev-server的安装没什么好说的，直接使用npm进行本地安装就好，没有什么异议；

webpack-dev-server的配置则分为两种，一种是package.json文件的配置，另一种就是webpack.config.js内进行配置；

在webpack.config.js中配置如下：

即增加一个devServer配置对象，下面说一下对象内常见的配置项：

port：设置托管代码的端口；

hot：热替换；

inline:热刷新

open：自动打开浏览器

contentBase：代码托管的根目录

另外，关于热替换，以前都需要安装HotModuleReplacementPlugin插件，但经过查询和检验，现在只要将hot设置为true就可以进行HMR，即热替换；还有关于HMR的内部原理请移步至此https://zhuanlan.zhihu.com/p/30669007，文章大略扫了一遍，讲的很棒，我还需要多看几遍；

关于热替换与热刷新的区别是，热替换不会触发浏览器的刷新，而且会保存浏览器之前的状态，比如之前浏览器点了一个按钮显示了一个弹框，热替换后弹框依旧存在，不需要再去点击按钮触发弹框；热刷新则会去刷新浏览器来展示更改后的代码，所以同样是上一个例子，刷新完毕之后，需要再去手动点击按钮触发弹框；如果两个同时设置，只有在热替换失效之后才会启用热刷新；

在package.json文件中配置：

依旧是那些常见的配置项，所以不再进行说明;

四、html-webpack-plugin

将设置好的模板页面生成在内存中，然后配合webpack-dev-server将其生成的main.js追加到模板页面中；

关于安装，直接通过npm安装即可；

配置，需要在webpack.config.js文件中通过require引入插件

然后在配置文件的暴露对象上增加plugins属性对html-webpack-plugin插件进行配置

template：属性即是配置模板页面的位置；

filename：为指定生成页面的名称；

另外，该插件还有很多配置项，想要查看可以去npm官网https://www.npmjs.com/package/html-webpack-plugin

ok，文章不要太长，还是分上下两篇比较好，下篇将对项目中所使用的loader进行总结，对babel的用法进行归纳；