前端基础进阶（三十）：webpak相关

webpack构建项目相关优化：

1 用过哪些loader

• 处理css相关的：

less-loader,sass-loader,postcss-loader,css-loader,style-loader

• 处理js相关的：

babel-loader

• 处理静态资源，例如图片文件资源的：

file-loader,url-loader

• 处理vue文件的：

vue-loader

2 mudule,chunk,bundle

• module：我们写的源码，无论是commonjs还是amdjs，都可以理解为一个个的module
• chunk：当我们写的module源文件传到webpack进行打包时，webpack会根据文件引用关系生成chunk文件，webpack 会对这些chunk文件进行一些操作
• bundle：webpack处理好chunk文件后，最后会输出bundle文件，这个bundle文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。

3 用过哪些plugin

1. clean-webpack-plugin:
   clean-webpack-plugin用于在打包前清理上一次项目生成的bundle文件，它会根据output.path自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过hash生成很多bundle文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大；
2. ProvidePlugin: ProvidePlugin可以很快的帮我们加载想要引入的模块，而不用require。一般我们加载jQuery需要先把它import：
3. NpmInstallWebpackPlugin:NpmInstallWebpackPlugin 运行 npm run start 会自动下载依赖

4 loader和plugin的区别

• loader：由于webpack只能识别js，loader相当于翻译官的角色，帮助webpack对其他类型的资源进行转译的预处理工作。
• plugins：plugins扩展了webpack的功能，在webpack运行时会广播很多事件，plugin可以监听这些事件，然后通过webpack提供的API来改变输出结果。

5 webpack优化相关

• 缩小文件搜索范围：

1. 优化loader的相关配置：include表示哪些目录中的文件需要进行babel-loader，exclude表示哪些目录中的文件不要进行babel-loader。这是因为在引入第三方模块的时候，很多模块已经是打包后的，不需要再被处理，比如vue、jQuery等；如果不设置include/exclude就会被loader处理，增加打包时间。
2. 优化module.noParse配置:如果一些第三方模块没有使用AMD/CommonJs规范，可以使用noParse来标记这个模块，这样Webpack在导入模块时，就不进行解析和转换，提升Webpack的构建速度；noParse可以接受一个正则表达式或者一个函数：

module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
    }
    
module: {
        //noParse: /jquery|lodash|chartjs/,
        noParse: function(content){
            return /jquery|lodash|chartjs/.test(content)
        }

1. 优化resolve.modules配置:我们代码中也会有大量的模块被其他模块依赖和引入，由于这些模块位置分布不固定，路径有时候会很长，比如import '../../src/components/button'、import '../../src/utils'；这时我们可以利用modules进行优化,　这样我们可以简单的通过import 'components/button'、import 'utils'进行导入，webpack会会优先从src目录下进行查找
2. 优化resolve.alias配置:

alias通过创建import或者require的别名，把原来导入模块的路径映射成一个新的导入路径；它和resolve.modules不同的的是，它的作用是用别名代替前面的路径，不是省略；这样的好处就是webpack直接会去对应别名的目录查找模块，减少了搜索时间。

• 减少打包文件：

1. externals:我们在项目打包时，有一些第三方的库会从CDN引入（比如jQuery等），如果在bundle中再次打包项目就过于臃肿，我们就可以通过配置externals将这些库在打包的时候排除在外。
2. Tree Shaking:我们并没有用到文件的所有模块，但是webpack仍会将整个文件打包进来，文件中一直用不到的代码就是“死代码”；这种情况就用用到Tree Shaking帮我们剔除这些用不到的代码模块。需要注意的是，为了让Tree Shaking生效，我们需要使用ES6模块化的语法，因为ES6模块语法是静态化加载模块，它有以下特点：静态加载模块，效率比CommonJS 模块的加载方式高

ES6 模块是编译时加载，使得静态分析成为可能进一步拓宽JS的语法,如果是require，在运行时确定模块，那么将无法去分析模块是否可用，只有在编译时分析，才不会影响运行时的状态。虽然webpack给我们指出了哪些函数用不上，但是还需要我们通过插件来剔除；由于uglifyjs-webpack-plugin不支持ES6语法，这里我们使用terser-webpack-plugin的插件来代替它：

1. 提取公共代码:通过optimization.splitChunks进行配置即可

2. 动态链接DllPlugin

• 缓存：

1. cache-loader:cache-loader可以将一些对性能消耗比较大的loader生产的结果缓存在磁盘中，等下次再次打包时如果是相同的代码就可以直接读取缓存，减少性能消耗。

• 多进程：

1. happypack:

参考网址：
Webpack配置全解析（基础篇）
Webpack配置全解析（优化篇）
Webpack的性能优化

webpack面试题
webpack面试题2