1.webpack是什么？
webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过Loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss,TS等），并将其打包为合适的格式以供浏览器使用。
2.webpack中loader和plugin分别是什么？
loader：是一个转换器，将A文件进行编译形成B文件，在此操作的是文件，比如将A.scss装欢成A.css，loader是一个单纯的文件转换过程。
plugin：是一个扩展器，丰富了webpack本身，针对的是loader结束后，webpack打包的整个过程，plugin扩展器不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。
3.webpack构建流程？
1.初始化参数
读取命令行传入或者webpack.config.js文件中的Shell语句，初始化本次构建的配置参数。
2.开始编译
用上一步分到的参数初始Compiler对象，加载所有配置的插件，通过执行对象的run方法开始编译。
3.确定入口
根据配置中的Entry找出所有入口文件
4.编译模块
从入口文件出发，调用所有配置的Loader对模块进行编译，再找出该模块依赖的模块，再递归本步骤知道所有入口依赖的文件都经过了本步骤的处理
5.完成模块编译
在经过第4步使用Loader翻译完所有模块后，得到了每个模块的最终内容以及它们之间的依赖关系
6.输出资源
根据入口和模块之间的依赖关系，组装一个个包含多个模块的Chunk，再将每个Chunk转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会
7.输出完成
在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统中。
4.webpack如何优化？
我们可以从两个方向进行优化
（1）优化打包的代码
①、设置多个entry
②、异步加载js
import(/* webpackChunkName:"a-jquery" */'jquery').then(jquery=>{
console.log(jquery);
})
③、tree-shaking
optimization: {
minimizer: [
// 压缩js的插件
new TerserWebpackPlugin({
// 启用缓存
cache: true,
// 启用多线程
parallel: true,
terserOptions: {
compress: {
// 没有使用的声明
unused: true,
// console相关的方法都删除
drop_console: false,
// debugger删除
drop_debugger: true,
// 无效的代码
dead_code: true
}
}
}),
new CssMinimizerWebpackPlugin(),
],
// webpack变量提升
concatenateModules: true, //默认为true
// 分割代码
splitChunks: {
// 分割代码的模式：
// async(对异步加载的模块进行代码分割)
// initial（同步的一起打包，异步的一起打包）
// all（不管同步异步，只要有相同需要分割的代码就打包为一份文件）
chunks: 'all',
// 文件超过20000字节，就需要分割
minSize: 20000,
// 文件可以分割最大的字节数，0不限制
// 不限制
maxSize: 0,
// module被多少个chunks加载过
minChunks: 1,
// 最大异步引入的次数
maxAsyncRequests: 30,
// 最大的加载次数
maxInitialRequests: 30,
// 文件命名的分割符
automaticNameDelimiter: '~',
//线程数
enforceSizeThreshold: 50000,
// 缓存组 只要与缓存组的名字对应上的，就用缓存组里的配置
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,//node_modules里的必分割
priority: -10 //优先级
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
（2）提高打包速度
1.node,npm的版本更新
webpack运行在node基础上，node进行版本更新，性能方面有所提升，webpack性能也会跟着有所提升。
2.尽可能少的在模块上应用loader
比如在babel-loader时，不需要对node modules也进行编译。
3.尽可能少的使用plugin，并且要保证plugin的可靠性
打包线上代码时，会压缩css，就会使用optimize-css-assets-webpack-plugin这个插件，但是我们在开发环境中，我们不需要压缩css，所以我们应该针对两种环境做两种不同的配置。
4.安装happypack插件，作用：让webpack把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
性能优化补充
（1）优化前端性能
1.压缩代码，删除多余的代码，注释，简化代码的写法等等方式，可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
2.利用CDN加速，在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
3.删除死代码，将代码中永远不会走到的代码片段删除，可以通过在启动webpack时追加参数--optimize-minimize来实现
4.提取公共代码
（2）提高webpack的构建速度
1.多入口情况下，使用CommonsChunkPlugin来提取公共代码
2.通过externals配置来提取常用库利用Dllplugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
3.happypack多线程加速
4.使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度，原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度。
5.使用Tree-shaking和Scope Hoisting来剔除多余代码
网友评论