带着问题学习webpack

这段时间一直在学习webpack,感觉webpack的功能太强大了。在学习过程中把自己看到的，学过的一些东西总结出来，供大家参考。在学习webpack之前必须了解的几个概念。

1. 什么是webpack和grunt和gulp有什么不同

Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting,模块话(AMD，ESM,CommonJS),全局分析

1. 什么是bundle,什么是chunk,什么是module?

Bundle是由webpack打包出来的文件，chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。Module是开发中的单个模块

1. 什么是loader?什么是plugin?

Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中
Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)

1. webpack-dev-server 和http服务器如nginax有什么区别？

Webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，他比传统的http服务对开发更简单高效

1. 什么是模块热更新

模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器

1. 什么是长缓存？在webpack中如何做到长缓存优化？

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output给输出的文件指定chunkhash，并且分离经常更新的代码和框架代码。通过NamedModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。

1. 什么是Tree-shaking?css可以使用Tree-shaking吗？

Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifyJSPlugin来Tree-shaking来Tree-shaking JS.CSS 需要使用Purify-CSS