Webpack5.x入门

这是一篇关于Webpack5.x入门的思维导图

Webpack 5.x 入门

• Webpack的基本功能
  • 代码转换：ES6转换ES5、TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
  • 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
  • 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
  • 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
  • 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
  • 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
  • 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
• Optimization
  • 优化技巧
    • 速度分析
      • speed-measure-webpack-plugin
    • 体积分析
      • webpack-bundle-analyzer
    • 多进程/多实例构建
      • thread-loader
      • happypack
    • 多进程并行压缩代码
      • terser-webpack-plugin
        • new TerserPlugin({ parallel: 4, }),
    • 预编译资源模块
      • DllPlugin
      • DllReferencePlugin
    • 利用缓存提升二次构建速度
      • babel-loader开启缓存 使用cache-loader 使用hard-source-webpack-plugin
    • 缩小文件搜索范围
      • { // 1、如果项目源码中只有js文件，就不要写成/\.jsx?$/，以提升正则表达式的性能 test: /\.js$/, // 2、babel-loader支持缓存转换出的结果，通过cacheDirectory选项开启 loader: 'babel-loader?cacheDirectory', // 3、只对项目根目录下的src 目录中的文件采用 babel-loader include: [resolve('src')] }
    • 动态 Polyfill 服务
    • Scope Hoisting
      • ModuleConcatenationPlugin
  • 代码分析 （Webpack Bundle Analyzer）
    • 使用npm_config_report判断 --report
  • 代码分割（Code Splitting）
  • 代码压缩（Code Compress）
  • resolve配置
    • 优化resolve.modules配置
      • resolve: { // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤 modules: [path.resolve(__dirname,'node_modules')] }
    • 优化resolve.alias配置
      • alias: { '@': resolve('src'), }, // 通过以上的配置，引用src底下的common.js文件，就可以直接这么写 import common from '@/common.js';
    • resolve.mainFields:['main']
      • 设置尽量少的值可以减少入口文件的搜索步骤
    • 优化resolve.extensions配置
      • 后缀尝试列表要尽可能小，不要将项目中不可能存在的情况写到后缀尝试列表中。 • 频率出现最高的文件后缀要优先放在最前面，以做到尽快退出寻找过程。 • 在源码中写导入语句时，要尽可能带上后缀，从而可以避免寻找过程。例如在确定的情况下将 require(’. /data ’)写成require(’. /data.json ’)，可以结合enforceExtension 和 enforceModuleExtension开启使用来强制开发者遵守这条优化
    • 优化resolve.noParse配置
      • noParse配置项可以让Webpack忽略对部分没采用模块化的文件的递归解析和处理，这 样做的好处是能提高构建性能。原因是一些库如jQuery、ChartJS 庞大又没有采用模块化标准，让Webpack去解析这些文件既耗时又没有意义。 noParse是可选的配置项，类型需要是RegExp 、[RegExp]、function中的一种。例如，若想要忽略jQuery 、ChartJS ，则优化配置如下
        • // 使用正则表达式 noParse: /jquerylchartjs/ // 使用函数，从 Webpack3.0.0开始支持 noParse: (content)=> { // 返回true或false return /jquery|chartjs/.test(content); }
  • Tree Shaking
• 规范化
  • Babel语法转换
    • babel-loader
    • @babel/preset-env
    • @babel/core
    • webpack配置文件target注意设置[es5]
    • .babel.config.js
      • useBuiltIns
        • usage
        • entry
    • transpiledependencies显示转义node_modules
  • eslint
    • eslint > 7
    • eslint-webpack-plugin
    • webpack 5使用eslint只要安装这两个库
    • .eslintrc.js
      • 没有创建这个文件会报错 No ESLint configuration found
      • env：设置运行环境，node，browser，es6
      • parserOtions: 需要设置 sourceType: "module",不然es6语法模块导入语法报错，Parsing error: 'import' and 'export' may appear only with 'sourceType: module'
      • extends: ['eslint:recommended', 'plugin:prettier/recommended']
    • plugins
      • eslint-plugin-import
      • eslint-plugin-prettier
      • eslint-config-prettier
      • eslint-plugin-html(报错Parsing error: Unexpected token <eslint>，安装此插件可以解决，或者eslintignore)
      • @babel/eslint-parser(支持babel转换的code)
  • 代码格式化ESlint+Prettier/Vetur
    • .prettierrc.js(配置完需要重启编辑器有时候才生效)
    • 子主题
  • commit
    • commitlint
    • commitizen
    • husky
  • stylelint
• 基础配置
  • 安装
  • webpack.config.js配置文件
    • entry
    • output
      • publicPath
    • watch
    • plugins
    • module
    • resolve
    • devtool
    • devServer
      • static
        • 内容提供文件夹，默认为public
      • open
      • proxy
      • hot
    • optimization
  • npm运行脚本
• webpack-dev-server
  • 代理转发（开发跨域）
  • HMR（hot module replacement）热更新
• browserlist
• 官方示例
• 输出自定义
  • Chalk
  • WebpackBar
• Mode
  • developement
  • production
  • 使用不同的配置文件
• Loaders
  • 常用Loader
    • css-loader
    • sass-loader
    • style-loader
    • raw-loader
    • url-loader
    • file-loader
    • webpack 5 使用 asset module
    • babel-loader
• Plugins
  • 常用Plugins
    • HtmlWebpackPlugin
    • DefinePlugin
    • SplitChunksPlugin
    • CopyWebpackPlugin
    • CompressionWebpackPlugin
    • CssMinimizerWebpackPlugin
    • ESlintWebpackPlugin
    • MiniCssExtractPlugin
    • TerserWebpackPlugin
• HMR
• FAQ
  • 拷贝静态文件