Webpack学习总结

前端项目的本质无非就是一个HTML文件。在前端刚兴起的时候，大家都将前端代码写在一个HTML文件中，里面的style标签用于写css样式或者使用link标签进行引入，script标签用于写js代码或者使用script标签进行引入。但是这样写代码会出现一些弊端，比如引用的css包和js包过多就会出现页面卡死和引用前后顺序难以管理等情况，这无疑是致命的缺点。于是人们都在想解决办法，后来AMD和commonJS应运而生，他们都致力于前端模块化开发，再到后来更加完整、强大、工程华、现代化的webpack诞生了。
webpack的官网解释是：本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。对于一开始接触前端的人来说，无非就是js+html+css，而浏览器只能认识这三兄弟，也许这个时候你会问，既然浏览器只认识这三兄弟，那么我们现在用的less、sass、ts、tsx等文件是怎么被浏览器认识的？这是webpack的功劳，是webpack将这些乱七八糟的东西统统打包为一个或几个js文件给浏览器读取。
下面我将记录一下webpack常用的名次解释。

1. publicPath：publicPath翻译过来就是公共路径，不错，它的确是一个公共路径，它提供了一个所有资源的基础路径。
2. plugin和loader的区别：loader翻译过来是加载器，它是针对文件的，比如less-loader的作用是将less转为css，css-loader是将css转为style。而plugin翻译过来是插件，它是对webpack功能的扩充，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行任务。比如说CleanWebpackPlugin用于每次打包前清理上次的dist文件夹，HtmlWebpackPlugin用于生成html文件入口。
3. webpack's Watch Mode、webpack-dev-server和webpack-dev-middleware的区别：我们每次编译了代码都需要手动build，这很麻烦，在自己学习webpack之前使用的是vue或者react脚手架来创建的项目，在使用这些工具创建项目的时候，只需要执行npm start就可以得到一个ip地址，本地代码保存一下页面就会同步更新，这些都是webPack做的。其中webpack's Watch Mode代表观察模式，build一次之后就不会退出命令行，一直在“监听”代码的变化，缺点是想要看到修改后的效果需要刷新浏览器。webpack-dev-server与webpack's Watch Mode有本质的不同，它为我们提供了一个简单的web服务器，而不在是通过文件协议（文件协议不能使用ajax访问资源）打开的网页，并且可以无需刷新浏览器就可以看到最新的修改结果。webpack-dev-server是实际上相当于启用了一个express的Http服务器+调用webpack-dev-middleware。
4. HMR：HMR即Hot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。