webpack面试题合集

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来剔除多余代码