webpack总结

一、webpack解决了什么问题

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

 

二、loader\plugin的区别 

 loader是使wenbpack拥有加载和解析非js文件的能力。

plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果

 

三、如何优化性能

1.压缩代码。用UglifyJsPlugin压缩js，min-css-extact-plugin压缩css

2.删除未使用代码（tree-shaking）,css用Purify-CSS

3.提取公共代码optimization.splitChunks.cacheGroups.common

4.利用CDN加速，将引用的静态资源修改为CDN上对应的路径，可以利用webpack对于output参数和loader的publicpath参数来修改资源路径

 

四、bundle、chunk、module

bundle: 打包出来的文件

chunk: 进行模块的依赖分析时，代码分割出的代码块

module： 开发中的单个模块

 

五、