打包过程及原理

• 首先webpack会将js、image、css等文件都视为一个模块，可以通过import或require进行引入。
• webpack首先会找到入口文件，通过入口文件找到关联的依赖文件，将他们打包在一起。
• webpack可以将一个大的bundle文件，拆分成多个小的文件，异步按需加载需要的文件。可以用optimization-splitChunks-cacheGroups-vendor进行拆分。
• 如果一个被多个文件同时引用，打包时只会生成一个文件。
• 如果引入的文件没有被调用，则该文件不会被打包。如果引入的变量或方法没有被调用，则对应的变量或方法也不会被打包。(webpack4.0 mode=production 自动为此模式)
• 对于多入口文件，如果引用了相同的代码，可以用optimization-splitChunks-cacheGroups-common将其抽离到一个公用的文件中。

loader

• 其中使用loader可以处理一些非js文件，将js中引入的图片、样式文件等文件以正确的方式插入到html或样式文件中。
• 使用babel-loader可以将es5以上的语法打包后转为es5语法。但es5以上的api(promise、async)需要通过babel-polyfill进行处理。

plugin

• plugin可以对代码进行优化、传输文件、清除文件等。
• tree-shaking用到的是uglifyjs-plugin、purify-css对代码进行压缩，对无用的代码进行清除。但在webpack4中，production模式自带此功能。