基础

1.打包

在开发中使用CSS预处理器，ES6语法等，浏览器不能识别，而打包则将其翻译成浏览器能识别的资源

2.构建工具

项目开发中需要不同打包工具，比较麻烦，而构建工具则将其集合起来。

3.打包资源

只能打包js和json，css和img需要loader

4.配置文件 webpack.config.js

所有配置文件都是基于nodejs平台运行，模块化采用commonjs
位置：根目录，和src同级
内容：五个概念entry / output / loader(module.rules) / plugins / mode

  1. //resolve用于拼接绝对路径
  2. const { resolve } = require('path')
  4. module.exports = {
  5.     entry : './src/index.js',
  6.   output : {
  7.     //输出路径多层可以建立文件夹，hash用于实际用途：区别
  8.         filename : 'js/build.[contenthash:10].js',
  9.       path:resolve(__dirname, 'build')
  10.     },
  11.     module : {
  12.       rules : []
  13.   },
  14.   plugins : [],
  15.     mode : 'production'
  16. }

5.打包样式资源：style-loader / css-loader

  1. /*
  2.     test表示匹配文件规则
  3.   use表示处理该类文件的loader，处理顺序：从右到左（从下到上）
  4.   less-loader：把less文件编译成css文件
  5.   css-loader：把css文件编译成commonjs模块加载到js中，内容为样式字符串
  6.   style-loader：创建style标签，插入js中的样式资源，添加到head中
  7. */
  9. module : {
  10.     rules : [
  11.     {
  12.       test:/\.css$/
  13.       use:['style-loader','css-loader']
  14.     },
  15.     {
  16.       test:/\.less$/
  17.       use:['style-loader','css-loader','less-loader']
  18.     }
  19.     ]
  20. }

6.打包html资源：html-webpack-plugin

  1. //引入类
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. plugins = [
  5.   创建实例：默认创建空的html文件，并自动引入打包输出的所有资源（JS/CSS）
  6.     new HtmlWebpackPlugin({
  7.   //template属性指定复制的html文件，并自动引入打包输出的所有资源（JS/CSS）
  8.       template: './src/index.html'
  9.   })
  10. ]

7.打包图片资源：url-loader

  1. module : {
  2.     rules : [
  3.     //不能处理html中img，仅能处理url()引入的
  4.     {
  5.       test:/\.(jpg|png|gif)$/,
  6.       use:'url-loader',               //url-loader依赖file-loader
  7.         //配置loader
  8.       options:{
  9.         limit : 8 * 1024,                            //小于则采用base64编码，减少请求数量但增大体积
  10.         esModule:false,                                //关闭es6模块，html-loader默认commonjs模块
  11.         name:'img/[hash:10].[ext]'                //取哈希值前10位重命名，[ext]取原扩展名
  12.       }
  13.     },
  15.     //处理html中的img图片
  16.     {
  17.       test:/\.html$/,
  18.       use:'html-loader'
  19.     }
  20.   ]
  21. }

  • file-loader 能让你指定从什么地方拷贝资源文件以及发布后放到哪个目录去，并能让你使用版本哈希码来重命名发布后的文件来实现增量更新和更好的缓存策略。

  • url-loader 能根据你指定的文件大小阈值，来判断一个文件是转换成内联的 base-64 码（如果该文件尺寸小于该阈值）还是使用file-loader来降级处理。小文件 base-64 化能有效减少 HTTP 请求数。

8.打包其他资源 file-loader

  1. module : {
  2.     rules : [
  3.       exclude: /\.(js|css|less|html|jpg|png|gif)$/,
  4.     use:'file-loader',
  5.     options:{
  6.         name:'[hash:10].[ext]'
  7.     }
  8.   ]
  9. }

9.dev-Server(在webpack.config.js中配置)

运行指令：npx webpack-dev-server

  1. module.exports = {
  2.   /* entry output module plugin mode */
  3.   /*
  4.       开发服务器devServer：自动化，只在内存中编译打包，没有输出
  5.       指令：npx webpack serve
  6.   */
  7.     devServer:{
  8.       contentBase:resolve(__dirname,'build'),
  9.     //启用gzip压缩
  10.     compress:true,
  11.     port:3000,
  12.     //自动打开浏览器
  13.     open:true
  14.   }
  15. }

10.汇总（练习）

*新增options的属性outputPath 用于指定输出的文件分类
打包完是没有css打包文件的，css和js在一起了

  1. const { resolve } = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. module.exports = {
  5.     entry:'./src/index.js',
  6.   output:{
  7.       filename:'js/built.js'
  8.     path:resolve(__dirname,'build')
  9.   },
  10.   module:{
  11.       rules:[
  12.       {
  13.           test:/\.css$/,
  14.         use:['style-loader','css-loader']
  15.       },
  16.       {
  17.           test:/\.less$/,
  18.         use:['style-loader','css-loader','less-loader']
  19.       },
  20.       {
  21.           test:/\.(jpg|png|gif)$/,
  22.         use:'url-loader',
  23.         options:{
  24.             limit:8*1024,
  25.           name:'[hash:10].[ext]',
  26.           esModule:false
  27.           outputPath:'imgs'
  28.         }
  29.       },
  30.       {
  31.           test:/\.html$/,
  32.         use:'html-loader'
  33.       },
  34.       {
  35.           exclude:/\.(js|css|less|html|jpg|png|gif)$/,
  36.         use:'file-loader',
  37.         options:{
  38.             name:'[hash:10].[ext]',
  39.           outputPath:'media'
  40.         }
  41.       }
  42.     ]
  43.   },
  44.   plugins:[
  45.       new HtmlWebpackPlugin({
  46.         template: './src/index.html'
  47.     })
  48.   ],
  49.   mode:'development',
  50.   devServer:{
  51.       contentBase:resolve(__dirname,'build'),
  52.     compress:true,
  53.     port:3000,
  54.     open:true
  55.   }
  56. }

进阶

12.提取CSS为单独文件：mini-css-extract-plugin

提取后是link标签引入，不是style标签引入，解析更快且不会闪屏

  1. const { MiniCssExtractPlugin } = require('mini-css-extract-plugin')
  3. module:{
  4.     rules:[
  5.     {
  6.         test:/\.css$/,
  7.       use:[
  8.           MiniCssExtractPlugin.loader,            //取代style-loader，作用：提取js中的css为单独文件
  9.         'css-loader'
  10.       ]
  11.     }
  12.   ]
  13. }
  15. plugins:[
  16.     new HtmlWebpackPlugin({
  17.       template: './src/index.html'
  18.   }),
  19.   new MiniCssExtractPlugin({
  20.     //重命名且重新分配位置
  21.       pathname: './css/built.css'
  22.   })
  23. ]

13.CSS兼容性处理：postcss-loader / postcss-preset-env

postcss —-> postcss-loader postcss-presrt-env
需要更改loader的配置，以对象的形式引入

  1. //postcss默认按browserslist生产环境的配置打包css
  2. //需要设置nodejs环境变量（临时），以便postcss按开发环境配置打包css
  3. process.env.NODE_ENV = 'development'
  5. module:{
  6.     rules:[
  7.     {
  8.         test:/\.css$/,
  9.       use:[
  10.           MiniCssExtractPlugin.loader,
  11.         'css-loader',
  12.         {
  13.             loader:'postcss-loader',
  14.           options:{
  15.               ident:'postcss',
  16.             //loader的插件
  17.             plugins: [
  18.                 require('postcss-preset-env')()                //帮助postcss找到package.json中browserslist的配置，并加载指定css兼容性样式
  19.             ]                
  20.           }
  21.         }
  22.       ]
  23.     }
  24.   ]
  25. }

14.CSS压缩：css-minimizer-webpack-plugin

15.js检查：eslint-loader

需要用到esline-loader(其依赖eslint)
规则是airbnb，需要用到eslint-config-airbnb-base / eslint-plugin-import / eslint
新增规则：use数组里仅一个自定义loader，可少use的一层

  1. /*
  2.     package.json
  3. */
  5. "eslintConfig":{
  6.     "extends":"airbnb-base"
  7. }
  10. /*
  11.     webpack.config.js
  12. */
  14. module:{
  15.     rules:[
  16.     {
  17.         loader:eslint-loader,
  18.       exclude:/node_modules/,                        //不检查三方库
  19.       enforce:'pre',                                        //优先执行
  20.       options:{
  21.           fix:true                                                //自动修复不符合规范的代码
  22.       }
  23.     }
  24.   ]
  25. }
  27. /*
  28.     文件中使用，用于忽略下一行的检查
  29. */
  30. //eslint-disable-next-line

16.js兼容性处理：babel-loader / @babel/core

  1. /*
  2.     js兼容性处理：babel-loader @babel/core
  3.       1.基本js兼容性处理： @babel/preset-env
  4.       2.全部js兼容性畜栏里 @babel/polyfill
  5.     3.按需加载           core-js
  7. */
  9. module:{
  10.     rules:[
  11.     {
  12.         test:/\.js$/,
  13.       exclude:/node_modules/,
  14.       loader:babel-loader，
  15.       options:{
  16.           //预设：指示babel做怎么样的兼容性处理
  17.             presets:[
  18.               '@babel/presets-env',
  19.               {
  20.                   //按需加载
  21.                     useBuiltIns:'usage',
  22.                   //指定core-js版本
  23.                   corejs:{version:3},
  24.                   //指定浏览器版本
  25.                     targets:{
  26.                         chrome:'60',
  27.               firefox:'60',
  28.               ie:'9',
  29.               safari:'10',
  30.               edge:'17'
  31.                     }
  32.                 }
  33.           ]
  34.         }
  35.     }
  36.   ]
  37. }

17.js和html的压缩

无html的兼容

  1. module.exports = {
  2.   /*...*/
  3.     plugins:[
  4.     //html代码压缩利用到HtmlWebpackPlugin的minify选项
  5.     new HtmlWebPackPlugin({
  6.       template:'./src/index.html',
  7.       minify:{
  8.         collapseWhitespace:true,
  9.         removeComments:true
  10.       }
  11.     })
  12.   ],
  13.   //js代码压缩
  14.     mode:'production'
  15. }

18.汇总（练习）

性能优化

19.性能优化

性能优化分为开发环境优化和生产环境优化
开发环境优化：优化打包构建速度、优化代码调试
生产环境优化：优化打包构建速度、优化代码运行性能

开发环境：

20.HMR

hot module replacement 热模块替换，作用：一个模块发生变化，只会重新打包这一个模块，而不是打包所有模块，极大提升构建速度
样式文件：可以使用HMR功能，因为style-loader内部实现了
js文件：默认不能使用HMR功能，需要修改js代码，添加支持HMR功能的代码，但只支持非入口文件
html文件：默认不能使用HMR功能，开启HMR后需要修改entry入口，将html文件引入，解决不更新的问题，但 html始终没有热更新也不需要热更新。

  1. /*
  2.     webpack.config.js
  3. */
  4. const { resolve } = require('path')
  6. module.exports = {
  7.   entry:['./index.js','./index.html'],
  8.   /*
  9.       ...
  10.   */
  11.     dev-server:{
  12.     contentBase:resolve(__dirname,'build')
  13.     compress:true,
  14.     port:3000,
  15.     open:true,
  16.     //开启HMR
  17.         hot:true
  18.     }
  19. }
  21. /*
  22.     index.js
  23. */
  24. if(module.hot){
  25.     //module.hot为true说明开启了HMR
  26.   //accept方法接收两个参数，第一个为监听的对象，第二个为监听的回调
  27.   module.hot.accept('./print.js',()=>{})
  28. }

21.source-map

一种提供源代码到构建后代码映射的技术（如果构建后代码出错了，通过映射可以追踪代码错误）

  1. module.export = {
  2.   entry:'',
  3.   /*
  4.       ...    
  5.   */
  6.   dev-server:{},
  7.     devtool:'source-map'
  8. }

source-map的配置选项：
[inline- | hidden- | eval-][nosources-][cheap-[module-]]-source-map
1.默认生成外部map文件
inline- 入口内联。提示错误信息和错误位置。
hidden- 外部map文件，隐藏部分代码。仅提示错误信息。
eval- 组件分别内联。提示错误信息和错误位置（hash值）。
2.默认不隐藏
nosources- 隐藏全部代码。仅提示错误信息，没有任何源代码信息。
3.
cheap- 只能精确到行。提示错误信息和错误位置（精确到行）。
cheap-module在cheap-的基础上加上loader的source map

构建速度（eval>inline>cheap）
应用场景：
开发环境：构建速度快，调试更友好。eval- cheap-可以选用
生产环境：隐藏源代码，代码体积。nosources- hidden-可以选用，inline-不能选用
开发环境：eval-source-map / eval-cheap-module-source-map
生产环境：source-map / cheap-module-source-map

生产环境：

22.oneOf

  1. module.export = {
  2.     /*
  3.       ...
  4.   */
  5.   module:{
  6.     rules:[
  7.       //eslint-loader,注意要enforce:'pre'
  8.       {},
  9.       {
  10.           oneOf:[
  11.         //babel-loader在里面
  12.         {},{},{}
  13.         ]
  14.       }
  15.     ]
  16.   }
  17. }
  19. /*
  20.     后续eslint使用eslint-webpack-plugin，避免这类问题
  21. */

oneOf是一个数组，每个元素是一个loader规则配置对象，每种类型的文件只会匹配里面的一个loader，优化构建速度。

23.缓存

babel缓存：让第二次打包构建速度更快
文件资源缓存：让代码上线的缓存更好使
hash：每次webpack构建都会生成唯一的hash值，重复构建时即使文件未修改也生成新的hash
问题：js和css同时使用一个hash值，任意一个文件修改都会导致缓存同时失效（缓存雪崩）
chunkhash：根据chunk生成hash值，打包来源于同一个chunk，那么hash值也一样
问题：js和css来源于同一个chunk，同一个chunkhash值，缓存雪崩
contenthash：根据文件内容生成hash值，不同文件内容hash值不一样

  1. const resolve = require('path')
  3. module.exports = {
  4.     entry:'./src/index.js',
  5.   output:{
  6.       filename:'js/[contenthash].js',                //filename使用contenthash命名，强缓存也可以重刷新
  7.     path:resolve(__dirname,'build')
  8.   },
  9.   module:{
  10.       rules:[
  11.       //eslint-loader
  12.       {},
  13.       {
  14.           oneOf:[
  15.           //babel-loader
  16.           {
  17.             test:/\.js$/,
  18.             exclude:/node_modules/,
  19.             loader:'babel-loader',
  20.             presets:[],
  21.           //开启babel缓存，第二次构建时会读取之前的缓存
  22.           cacheDirectory:true
  23.           }
  24.         ]
  25.       }
  26.     ]
  27.   }
  28. }

24.tree shaking

tree shaking：去除无用代码
前提：1.必须使用ES6模块化 2.开启production环境（无需额外配置）
作用：减少代码体积
在package.json中配置：
"sideEffects":false 所有代码都没有副作用（都可以tree shaking）
问题：可能会把css/ @babel/polyfill文件不打包（因为仅引入没有使用）
"sideEffects":["*.css","*.less"] 表示忽略css/less文件

25.代码分割

代码分割可用于并行加载、按需加载。
方法一：多入口
多个入口文件打包成多个bundle，但多个文件都用同个三方库时，三方库的代码会存在于多个bundle，需要配置optimizaiton

  1. const resolve = require('path')
  3. module.exports = {
  4.     entry:{
  5.       index:'./src/index.js',
  6.     test:'./src/test.js'
  7.   },
  8.   output:{
  9.       filename:'js/[name].[contenthash:10].js',
  10.     path:resolve(__dirname,'build')
  11.   },
  12.   /* ... */
  13. }

方法二：配置optimization
可以将node_modules中代码单独打包一个chunk最终输出
自动分析多入口chunk中的公共文件，公共文件打包成单独的chunk

  1. module.exports = {
  2.     /*entry output module plugins*/
  3.   optimization:{
  4.       splitChunks:{
  5.         chunks:'all'
  6.     }
  7.   }
  8. }

**方法三：单入口+动态引入 +optimizaiton配置（常用）
js文件的动态引入：import函数返回一个promise对象，then回调默认接收一个对象，对象包含export的内容，所以可以解构赋值直接使用其内暴露的内容，默认暴露则解构赋值使用default
import函数接收的路径前加上/ webpackChunkName:’xxx’ */ 可作为bundle的name属性，用于自定义命名bundle文件。

  1. import(/* webpackChunkName:'test' */'./test').then(
  2.     ({mul})=>{
  3.       console.log(mul(2,5))
  4.   }
  5. ).catch(
  6.     (err)=>{
  7.       console.log(err)
  8.   }
  9. )

26.懒加载和预加载

正常加载可以认为是并行加载（同一时间加载多个多个文件）。（JS引擎线程和GUI渲染线程互斥，导致JS线程运行时页面不会渲染，同步加载越多用户等待时间越长）
预加载(prefetch)：在并行加载后，浏览器空闲再偷偷加载资源，使用时直接从缓存读取。
懒加载：代码被需要时才发送请求读取。
懒加载实现：在异步任务中实现动态import即可
预加载实现：在懒加载之上，动态import时，路径前加上/ prefetch:true /

27.PWA

PWA(progressive web application):渐进式网络开发应用程序（离线可访问），借助workbox（workbox-webapck-plugin）实现：在有网络时将资源存到serviceworker中，离线时读取serviceworker的资源。

  1. /*
  2.     webpack.config.js中生成serviceworker
  3. */
  5. const workboxWebpackPlugin = require('workbox-webpack-plugin')
  7. module.exports = {
  8.     /*entry output module...*/
  9.   plugins:[
  10.     //生成一个serviceworker配置文件
  11.       new workboxWebpackPlugin.GenerateSW({
  12.       //1.帮助serviceworker快速启动；2.删除旧的serviceworker
  13.         clientsClaim:true,
  14.       skipWaiting:true
  15.     })
  16.   ]
  17. }
  19. /*
  20.     在需要离线访问的js文件中注册serviceworker,处理兼容性问题
  21. */
  22. if('serviceWorker' in navigator){
  23.     window.addEventListener('load',()=>{
  24.     //注册serviceworker，文件是servicebox-webpack-plugin生成的
  25.       navigator.serviceworker.register('/service-worker.js').then(
  26.     ()=>{console.log('sw注册成功')}
  27.     ).catch(
  28.     ()=>{console.log('sw注册失败')}   
  29.     )
  30.   })
  31. }

问题1：eslint不认识window、navigator全局变量，需要修改package.json中的eslintConfig配置

  1. "env":{
  2.     "browser":true            //支持浏览器全局变量
  3. }

问题2：sw代码必须运行在服务器上

28.多进程打包

需要安装thread-loader，写在babel里。线程启动需要约600ms，线程通信也需要消耗，只有工作时长较长才需要多进程打包。

  1. module.exports = {
  2.     /*entry output*/
  3.   module = {
  4.         rules:[
  5.           {
  6.               test:/\.js$/,
  7.               exclude:/node_modules/,
  8.               use:[
  9.                   'thread-loader',
  10.                   {
  11.                       loader:'babel-loader',
  12.                       options:{
  13.                             presets:[
  14.                               '@babel/preset-env',
  15.                               {
  16.                                   useBuiltIns:'usage',
  17.                   corejs:{version:3},
  18.                   //指定浏览器版本
  19.                   targets:{
  20.                     chrome:'60',
  21.                     firefox:'60',
  22.                     ie:'9',
  23.                     safari:'10',
  24.                     edge:'17'
  25.                   }
  26.                                 }
  27.                           ]
  28.                         }
  29.                     }
  30.               ]
  31.             }
  32.       ]
  33.     }
  34. }

29.external

external可以不打包三方库，三方库可以从cdn引入，而非自己打包。（面试题-为什么cdn可以加快速度：因为http协议限制同源的最大连接数是有限的，所以把三方库从自己的节点转自cdn节点）

  1. module.exports = {
  2.     /* entry output module plugin mode*/
  3.   externals:{
  4.       jquery:'jQuery'
  5.   }
  6. }

30.dll

dll:事先单独打包一次三方库，打包index.js时不打包三方库，且三方库可以打包成多个bundle。区别于：
external：免打包三方库
代码分割：每次打包index.js时都会打包三方库，三方库打包成一个bundle

dll分三步：
1.配置webpack.dll.js，用于指明单独打包的三方库，并生成映射文件manifast.json(webpack.DllPlugin)
2.webpack.config.js中配置webpack.DllReferencePlugin，用于指示映射关系，指示免打包的三方库
3.webpack.config.js中配置AddAssetHtmlWebpackPlugin，用于自动引入html

  1. /* 
  2.     webpack.dll.js 
  3.     运行指令：webpack --config webpack.dll.js
  4. */
  5. const { resolve } = require('path')
  6. const webpack = require('webpack')
  8. module.exports = {
  9.     entry:{
  10.     //最终打包生成的[name]是jquery，['jquery']是要打包的库
  11.     //多对属性多个bundle，数组内多个元素表示多个三方库打包成一个bundle
  12.       jquery:['jquery']
  13.   },
  14.   output:{
  15.       filename:'[name].js',
  16.     path:resovle(__dirname,'dll'),
  17.     library:'[name]_[hash]'                        //库中向外暴露的变量名称
  18.   },
  19.   plugins:[
  20.     //输出manifest文件，该文件提供jquery打包文件和三方库的映射关系
  21.       new webpack.DllPlugin({
  22.         name:'[name]_[hash]',                                                    //映射库的暴露的名称内容，与上述保持一致
  23.       path:resolve(__dirname,'dll/manifest.json')        
  24.     })
  25.   ]
  26. }
  28. /* webpack.config.js */
  29. const { resolve } = require('path')
  30. const webpack = require('webpack')
  31. const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
  33. module.exports = {
  34.     /* entry output module*/
  35.   plugins:[
  36.     //通过映射文件，指示webpack不需要打包的库且更改其名称，
  37.       new webpack.DllReferencePlugin({
  38.         mainfest:resolve(__dirname,'dll/manifest.json')
  39.     }),
  40.     //指示webpack在html中自动引入在映射关系中的三方库
  41.     new AddAssetHtmlWebpackPlugin({
  42.         filepath:resolve(__dirname,'dll/jquery.js')
  43.     })
  44.   ]
  45. }

31.性能优化汇总

开发环境性能优化：
优化打包构建速度
HMR
优化代码调试
source-map

生产环境性能优化：
优化打包构建速度
oneOf
babel缓存
多进程打包
externals
dll
优化代码运行性能
缓存（hash-chunkhash-contenthash）
tree shaking
code split
懒加载/预加载
pwa

33.详细配置：entry

1.string
单入口，打包形成一个chunk，输出一个bundle，此时chunk名称默认是main
2.array
多入口，数组中所有元素形成一个chunk，输出一个bundle，此时chunk名称默认是main。
用途：在HMR功能中让html热更新生效
3.object
多入口，生成多个chunk，输出多个bundle，此时chunk的[name]是key

34.详细配置：output

output配置对象的属性
1.filename 指定文件名称和目录
2.path 输出文件目录（所有资源输出的公共目录）
3.pubilcPath 所有资源引入公共路径前缀
不添加，如’imgs/a.jpg’则在当前目录下寻找
添加’/‘，如’/imgs/a.jpg’则在根目录寻找
4.chunkFilename 非入口chunk的名称（react脚手架有配置）
5.library 打包文件向外暴露的变量名（不设置则为IIFE）
6.libraryTarget 变量名添加到哪个对象上

  1. const { resolve } = require('path')
  3. module.exports = {
  4.     output: {
  5.       filename:'js/[contenthash:10].js',
  6.     path:resolve(__dirname,'build'),
  7.     publicPath:'/',
  8.     chunkFilename:'js/[name].[contenthash:10].js',
  9.     //library:[name],
  10.     //libraryTarget:window,                browser
  11.     //libraryTarget:global,                node
  12.   }
  13. }

35.详细配置：module

1.多个loader使用use数组，单个loader写成loader
2.enforce ‘pre’优先执行 ‘post’延后执行
3.exclude排除（需要排除/node_modules/） include只检查（resolve(__dirname,’src’)）

36.详细配置：resolve

resolve用于解析模板的规则
引入文件时，引入自己的文件使用相对路径或绝对路径找到文件，引入三方库时则只需要使用包名即可，原理是webpack自动去node_module寻找，且webpack会逐级往上找。

  1. const { resolve } = require('path')
  3. module.exports = {
  4.     /* entry output module plugin mode*/
  5.   resolve:{
  6.     //配置解析模板路径别名，方便但无提示
  7.       alias:{
  8.         $css:resolve(__dirname,'src/css')
  9.       //之后可以在任意地方使用src/css都可以避免复杂的相对路径
  10.     },
  11.     //配置省略文件后缀名，前面的优先级高
  12.     extensions:['js','json','jsx'],
  13.     //配置第三方库的路径（可避免webpack自行逐渐往上找node_modules）
  14.     modules:[resolve(__dirname,'../../node_modules')'node_modules']
  15.   }
  16. }

37.详细配置：devServer

  1. module.exports = {
  2.     /* entry output module plugins mode*/
  3.   //运行代码的目录
  4.   contentBase:resolve(__dirname,'build'),
  5.   //监视contentBase目录下的所有文件，一旦文件变化就会reload(无需重启)
  6.   watchContentBase:true,
  7.   watchOptions:{
  8.       //忽略文件
  9.     ignored:/node_modules/
  10.   },
  11.   //gzip
  12.   compress:true,
  13.   port:5000,
  14.   open:true,
  15.   hot:true,
  16.   //不显示启动服务器日志信息
  17.   clientLogLevel:'none',
  18.   //除基本信息外均不显示
  19.   quiet:true,
  20.   //禁止全屏报错
  21.   ovelay:false,
  22.   //解决开发环境的跨域问题
  23.   proxy:{
  24.       '/api':{
  25.             target:'http://localhost:3000',
  26.         pathRewrite:{
  27.               '/^api/':''
  28.           },
  29.       changeOrigin:true
  30.       }
  31.   }
  32. }

38.详细配置：optimizaiton

index.js引入a.js，其中index.js文件内容中记录着a.js的hash值，所以当a文件内容变化时，a的hash值变化，导致index.js的内容变化，导致index.js的hash值也变化。
解决方案：把index.js中保存其他模块hash值的内容提取为单独的runtime文件

  1. const TerserWebpackPlugin = require('terser-webpack-plugin')
  3. module.exports = {
  4.     /* entry output module plugins mode*/
  5.   optimizaiton:{
  6.       splitChunks:{
  7.         chunks:'all',
  8.       //以下为默认配置
  9.       miniSize:30*1024,
  10.       maxSize:0,                                    //最大没有限制
  11.       minCHunks:1,                                //要限制的chunk最少被引用1次
  12.       maxAsynbcRequests:5,                //按需加载时并行加载的文件的最大数量
  13.       maxInitialRequests:3,                //入口js文件最大并行请求数量
  14.       automaticNameDelimiter:'~',    //名称连接符
  15.       name:true,                                    //跨域使用命名规则
  16.       cacheGroups:{
  17.         //分割chunk的组，node_modules文件会被打包到vendors组的chunk中 ==>vendors~xxx.js
  18.           vendors:{
  19.             test:/[\\/]node_modules[\\/]/,
  20.           priority:-10
  21.         },
  22.         default:{
  23.             miniChunk:2,                        //要限制的chunk最少被引用2次,覆盖上述
  24.           priority:-20,
  25.           reuseExistingChunk:true    //如果要打包的模板是之前已提取的则复用
  26.         }
  27.       }
  28.     },
  29.     //解决a文件修改导致b文件的contenthash变化
  30.     runtimeChunks:{
  31.         name:entrypoint => `runtime-${entrypoint.name}`
  32.     },
  33.     minimizer:[
  34.         //配置生产环境的压缩方案：js和css （不再用ugily，而是terser）
  35.       new TerserWebpackPlugin({
  36.           cache:true,
  37.         parallel:true,                    //多线程打包
  38.         sourceMap:true
  39.       })
  40.     ]
  41.   }
  42. }