☝️ webpack5 + react + typescript环境配置代码完全指南(信息密度点大，老铁来挑战不？)

  "devDependencies": {
    "@babel/core": "^7.13.13",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.13.0",
    "@commitlint/cli": "^12.0.1",
    "@commitlint/config-conventional": "^12.0.1",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/webpack-env": "^1.16.0",
    "@typescript-eslint/eslint-plugin": "^4.19.0",
    "@typescript-eslint/parser": "^4.19.0",
    "babel-loader": "^8.2.2",
    "chalk": "^4.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "conventional-changelog-cli": "^2.1.1",
    "copy-webpack-plugin": "^8.1.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.0",
    "css-minimizer-webpack-plugin": "^1.3.0",
    "detect-port-alt": "^1.1.6",
    "error-overlay-webpack-plugin": "^0.4.2",
    "eslint": "^7.22.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-unicorn": "^29.0.0",
    "fork-ts-checker-webpack-plugin": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "husky": "^4.3.8",
    "ip": "^1.1.5",
    "is-root": "^2.1.0",
    "lint-staged": "^10.5.4",
    "mini-css-extract-plugin": "^1.4.0",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.8",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.2.1",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "stylelint": "^13.12.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-standard": "^21.0.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.3.0",
    "stylelint-order": "^4.1.0",
    "stylelint-scss": "^3.19.0",
    "terser-webpack-plugin": "^5.1.1",
    "typescript": "^4.2.3",
    "webpack": "^5.37.1",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3",
    "webpackbar": "^5.0.0-3"
  },
  "dependencies": {
    "@babel/runtime-corejs3": "^7.13.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }

import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator';

const code = 'const n = 1';

// 将源代码转换为AST
const ast = parse(code);

// 转换AST
traverse(ast, {
  enter(path) {
    // in this example change all the variable `n` to `x`
    if (path.isIdentifier({ name: 'n' })) {
      path.node.name = 'x';
    }
  },
});

// 生成代码 <- ast
const output = generate(ast, code);
console.log(output.code); // 'const x = 1;'

module.exports = source => {
	// source 就是加载到的文件内容
	console.log(source)
	return "hello ~" // 返回一个字符串
}

"targets": {
  "browsers": ["last 2 versions", "safari >= 7"], // 配置safari的版本大于7的语法才转译
  "node": "6.10" // node版本支持到6.10

<div></div>

const reactElement = ReactElement.createElement(
  	... // 标签名称字符串/ReactClass,
  	... // [元素的属性值对对象],
  	... // [元素的子节点]
)
reactElement('div', null, '')

//.babelrc

{

"presets": ["@babel/preset-env"]

}

// .eslintrc    
{      
    "plugins": ["prettier"],      
    "rules": {        
        "prettier/prettier": "error"      
    }    
}

// .eslintrc
{
  "extends": ["plugin:prettier/recommended"]
}

“rules”: {},
       /** 这里传入webpack并不是import插件能识别webpack，
       * 而且通过npm安装了「eslint-import-resolver-webpack」，
       * 「import」插件通过「eslint-import-resolver-」+「webpack」找到该插件并使用，
       * 就能解析webpack配置项。使用里面的参数。
       **/
"settings": {
        // 使用webpack中配置的resolve路径
        "import/resolver": "webpack" 
}

const merge = require("webpack-merge");
merge(
    {a : [1],b:5,c:20},
    {a : [2],b:10, d: 421}
)
//合并后的结果
{a : [1,2] ,b :10 , c : 20, d : 421}

Positioning -- 定位
Box Model -- 盒模型
Typography -- 版式
Visual -- 可见性（显示和隐藏）
Animation -- 动画
Misc -- 其它杂项

.declaration-order {
  /* 1.Positioning 位置属性 */ 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;

  /* 2.Box Model 盒子属性 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;

  /* 3.Typography 文字属性 */
  color: #888;
  font: normal 16px Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;

  /* 4.Visual 视觉属性 */
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 4px;
  opacity: 1;

  /* 5.Animation Misc 其他 */
  transition: all 1s;
  user-select: none;
}

// 控制台打印红色的hello
require('chalk').red('hello')

// 在windows系统上，我们使用：
"SET NODE_ENV=production && webpack --config build/webpack.config.js"

// 在Lunix系统和安装并使用了bash的windows的系统上，我们会使用:
"EXPORT  NODE_ENV=production && webpack --config build/webpack.config.js"

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader','postcss-loader' // postcss-loader 可选
        ],
      },{
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader','postcss-loader','less-loader' // postcss-loader 可选
        ],
      }
    ],
  },
};

// 入口文件 app.js
import Root from './components/Root'

// Root.js
import '../styles/main.less'
import Topics from './Topics'

// Topics.js
import "../styles/topics.less"

            Asset       Size  Chunks                    Chunk Names
          app.css  332 bytes       1  [emitted]         app
           app.js    283 KiB       1  [emitted]  [big]  app

            Asset       Size  Chunks                    Chunk Names
          app.css  260 bytes       1  [emitted]         app
           app.js    281 KiB       1  [emitted]  [big]  app
 topics.bundle.js   2.55 KiB       4  [emitted]         topics
       topics.css   72 bytes       4  [emitted]         topics

optimization: {
  splitChunks: {
    cacheGroups: {
      // Extracting all CSS/less in a single file
      styles: {
      	name: 'styles',
        test: /\.(c|le)ss$/,
        chunks: 'all',
        enforce: true,
      },
    }
  }
},

            Asset       Size  Chunks                    Chunk Names
           app.js    281 KiB       2  [emitted]  [big]  app
 styles.bundle.js  402 bytes       0  [emitted]         styles
       styles.css  332 bytes       0  [emitted]         styles
 topics.bundle.js   2.38 KiB       5  [emitted]         topics

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
};

const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')

module.exports = {
  plugins: [new ErrorOverlayPlugin()],
  devtool: 'cheap-module-source-map', // 'eval' is not supported by error-overlay-webpack-plugin
}

module.exports = {
    parser:  '@typescript-eslint/parser', // 定义ESLint的解析器
    extends: ['plugin:@typescript-eslint/recommended'],// 定义文件继承的子规范
    plugins: ['@typescript-eslint'],// 定义了该eslint文件所依赖的插件
    env:{                          // 指定代码的运行环境
        browser: true,
        node: true,
    }                               
}

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist', 
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App', 
      filename: 'assets/admin.html'  // 在  output.path 目录下生成 assets/admin.html 文件
    })
  ]
}

 "scripts": {
    "lint": "eslint src"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  },

{
    "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
  },
  "lint-staged": {
    // 首先，我们会对暂存区后缀为 `.ts .tsx .js` 的文件进行 eslint 校验，
    // --config 的作用是指定配置文件。
    "*.{ts,tsx,js}": [
      "eslint --config .eslintrc.js"
    ],
    // 同理 是stylelint的校验
    "*.{css,less,scss}": [
      "stylelint --config .stylelintrc.js"
    ],
    // prettier格式化
    "*.{ts,tsx,js,json,html,yml,css,less,scss,md}": [
      "prettier --write"
    ]
  },
}

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin(
      parallel: true   // 多线程
    )],
  },
};

{
  "main": "index.js",
  "scripts": {
    "start": "cross-env NODE_ENV=development node scripts/server",
    "build": "cross-env NODE_ENV=production webpack --config ./scripts/config/webpack.prod.js",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
    "lint": "npm run lint-eslint && npm run lint-stylelint",
    "lint-eslint": "eslint -c .eslintrc.js --ext .ts,.tsx,.js src",
    "lint-stylelint": "stylelint --config .stylelintrc.js src/**/*.{less,css,scss}"
  },
  "browserslist": [">0.2%", "not dead", "ie >= 9", "not op_mini all"],
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js}": ["eslint --config .eslintrc.js"],
    "*.{css,less,scss}": ["stylelint --config .stylelintrc.js"],
    "*.{ts,tsx,js,json,html,yml,css,less,scss,md}": ["prettier --write"]
  }
}

   "editor.formatOnSave": true, // 自动格式化代码，我们使用的是prettier
   "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // 保存自动修复 eslint报错（有些报错必须手动修复）
    "source.fixAll.stylelint": true // 保存自动修复 stylelint报错，也就是css报错
  }

{
  "css.validate": false, // 禁用vscode本身的css校验功能
  "less.validate": false, // 禁用vscode本身的less校验功能
  "scss.validate": false, // 禁用vscode本身的scss校验功能

  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], // eslint 校验的文件格式
  "search.exclude": { // 搜索文件时排除的文件夹
    "**/node_modules": true,
    "dist": true,
    "build": true
  },
  "editor.formatOnSave": true,  // 保存时，自动格式化
  "editor.codeActionsOnSave": { // 保存时自动格式化eslint的规则和stylint的规则
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "[javascript]": { // 底下类似是指校验js，jsx，ts，tsx的校验器是prettier，而不是vscode默认的
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

module.exports = {
  presets: [
    [
      '@babel/preset-env',  // 将基于你的实际浏览器及运行环境，自动的确定babel插件及polyfill
      {
        useBuiltIns: 'usage', // 按需使用
        modules: false, // 意思是不转义import语法，主要是为了tree-shaking
      },
    ],
    '@babel/preset-react', // 转化js、jsx文件的插件集合
    '@babel/preset-typescript', // 转化ts，tsx文件的插件集合
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',// 优化polyfill的插件
      {
        corejs: {
          version: 3,
          proposals: true,
        },
      },
    ],
  ],
};

"browserslist": [">0.2%", "not dead", "ie >= 9", "not op_mini all"],

import { tmpPrint } from './tmp.js'
export function print () {
  tmpPrint() 
  console.log('我是 num.js 的 print 方法')
}

{
"./src/num.js":
      (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";
        __webpack_require__.r(__webpack_exports__);
        __webpack_require__.d(__webpack_exports__, "print", function () { return print; });
        // 加载 ./src/tmp.js 模块
        var _tmp_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/tmp.js");
        function print() {
          Object(_tmp_js__WEBPACK_IMPORTED_MODULE_0__["tmpPrint"])()
          console.log('我是 num.js 的 print 方法')
        }
        //# sourceURL=webpack:///./src/num.js?");
      }),
}

function __webpack_require__(moduleId) {
    // 所有模块都会被缓存，如果在缓存里就直接从缓存里拿
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 这里是缓存的定义，i是id的意思，l是load的意思，exports是导出的内容
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };

    // 如果不是在缓存里，取出模块把module, module.exports, __webpack_require__作为参数放入到模块里
    // 如下的modules[moduleId]中保存的内容就相当于这块内容：
    // (function (module, __webpack_exports__, __webpack_require__) {
    //    "use strict";
    //    __webpack_require__.r(__webpack_exports__);
    //    __webpack_require__.d(__webpack_exports__, "print", function () { return // print; });
        // 加载 ./src/tmp.js 模块
       // var _tmp_js__WEBPACK_IMPORTED_MODULE_0__ = // __webpack_require__("./src/tmp.js");
        // function print() {
         //  Object(_tmp_js__WEBPACK_IMPORTED_MODULE_0__["tmpPrint"])()
         // console.log('我是 num.js 的 print 方法')
       // }
        //# sourceURL=webpack:///./src/num.js?");
     // }),
// }

    
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    这下是不是懂了，很简单啊这个函数！就是加载和暴露模块用的
    // Flag the module as loaded
    module.l = true;

    // Return the exports of the module
    return module.exports;
  }
  
  
 __webpack_require__.d = function (exports, name, getter) {
     // __webpack_require__.o这个函数的意思是检查name是否是exports的属性
    if (!__webpack_require__.o(exports, name)) {
      // 如果exports原本没有name属性，就用defineProperty去定义name属性
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

   // 这个函数就是用来标识是否是es模块的
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };

{
"./src/num.js":
// 大家还记得上面讲require有一句
// modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 我们可以看到 module就等于下面函数的 module，代表这个模块对象
// module.exports对应__webpack_exports__，也就是__webpack_exports__代表module导出的对象
// __webpack_require__对应function的 __webpack_require__参数，也就是导入模块函数
      (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";
        // 这句话的意思把导出的exports对象标记为esmodule
        __webpack_require__.r(__webpack_exports__);
        // 这句话的意思是把模块下面的print函数，放入exports导出对象
        __webpack_require__.d(__webpack_exports__, "print", function () { return print; });
        // 加载 ./src/tmp.js 
        var _tmp_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/tmp.js");
        function print() {
          Object(_tmp_js__WEBPACK_IMPORTED_MODULE_0__["tmpPrint"])()
          console.log('我是 num.js 的 print 方法')
        }
        //# sourceURL=webpack:///./src/num.js?");
      }),
}

require('./Header').default

const Header = require('./Header')
Header.default 表示导出的Header组件
Header.A代表导出的A

// Header.js
export default Header;
export const A=1；

require('./Header').A

module.exports = {
  extends: ['@commitlint/config-conventional'], // 这个插件继承的是angular团队的提交规范
  rules: {
    'type-enum': [ // 解释上面已经提过数组每一位的意思
      2,
      'always',
      ['build', 'ci', 'chore', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test'],
    ],
  },
};

// 表明是最顶层的配置文件，发现设为 true 时，才会停止查找.editorconfig 文件
root = true

[*]
// tab 为 hard-tabs，space 为 soft-tabs 表示缩进符号，我们选的空格
indent_style = space
// 设置整数表示规定每级缩进的列数和 soft-tabs 的空格数。
// 如果设定为 tab，则会使用 tab_width 的值（如果已指定）
indent_size = 2
// 定义换行符，支持 lf、cr 和 crlf
end_of_line = lf
// 编码格式，支持 latin1、utf-8、utf-8-bom、utf-16be 和 utf-16le，不建议使用 uft-8-bom
charset = utf-8
// 设为 true 表示会除去换行行首的任意空白字符，false 反之
trim_trailing_whitespace = true
// 设为 true 表明使文件以一个空白行结尾，false 反之
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

const OFF = 0;
const WARN = 1;
const ERROR = 2;

module.exports = {
  // 要在配置文件中指定环境，请使用env键并通过将每个设置为来指定要启用的环境true。
  // 例如，以下启用浏览器和Node.js环境：
  // es6表示对于新的ES6全局变量，比如Set的支持，注意跟下面parserOptions的ecmaVersion对比一下
  // ecmaVersion: 6 表示启用对于ES6语法的校验
  //
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  // 
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:unicorn/recommended',
    'plugin:promise/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  // 指定解析器
  // 默认情况下，ESLint使用Espree作为其解析器。您可以选择指定在配置文件中使用其他解析器
  parser: '@typescript-eslint/parser',
  // parserOptions属性在文件中设置解析器选项
  // ecmaVersion-设置为3、5（默认），6、7、8、9、10或11，以指定要使用的ECMAScript语法的版本。
  // sourceType-设置为"script"（默认），或者"module"代码在ECMAScript模块中。
  // ecmaFeatures -一个对象，指示您要使用哪些其他语言功能,参数如下
  //   globalReturn-允许return在全局声明
  //   impliedStrict-启用全局严格模式（如果ecmaVersion大于等于5）
  //   jsx-启用JSX
  parserOptions: {
    ecmaFeatures: {
      impliedStrict: true,
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', 'unicorn', 'promise', '@typescript-eslint', 'prettier'],
  settings: {
     // 这里的improt/resolver针对插件是eslint-import-resolver-xxx
     // 比如下面的typescript里的规则，针对的就是插件eslint-import-resolver-typescript
     // 再下面的node就是配置eslint-import-resolver-node
     // 有人说我们没依赖eslint-import-resolver-node，哪里来的呢，是因为
     // eslint-import-plugin插件依赖，所以也安装了它，这就要涉及到npm依赖包平铺的规则了，下面会讲
    'import/resolver': {
      typescript: {
        directory: './tsconfig.json', // 这里主要解决的是别名的问题，tsconfig.json里有别名设置
      },
      node: {
        extensions: ['.tsx', '.jsx', '.ts', '.js'],
      },
    },
  },
  rules: {
    // 以下规则就不详细讲了，因为很多都是因为typescript插件bug跟eslint冲突不得不关闭一些规则
    'import/extensions': [
      ERROR,
      'ignorePackages',
      {
        ts: 'never',
        tsx: 'never',
        js: 'never',
      },
    ],
    'import/no-extraneous-dependencies': [ERROR, { devDependencies: true }],
    'import/prefer-default-export': OFF,
    'import/no-unresolved': ERROR,
    'import/no-dynamic-require': OFF,

    'unicorn/better-regex': ERROR,
    'unicorn/prevent-abbreviations': OFF,
    'unicorn/filename-case': [
      ERROR,
      {
        cases: {
          // 中划线
          kebabCase: true,
          // 小驼峰
          camelCase: true,
          // 下划线
          snakeCase: false,
          // 大驼峰
          pascalCase: true,
        },
      },
    ],
    'unicorn/no-array-instanceof': WARN,
    'unicorn/no-for-loop': WARN,
    'unicorn/prefer-add-event-listener': [
      ERROR,
      {
        excludedPackages: ['koa', 'sax'],
      },
    ],
    'unicorn/prefer-query-selector': ERROR,
    'unicorn/no-null': OFF,
    'unicorn/no-array-reduce': OFF,

    '@typescript-eslint/no-useless-constructor': ERROR,
    '@typescript-eslint/no-empty-function': WARN,
    '@typescript-eslint/no-var-requires': OFF,
    '@typescript-eslint/explicit-function-return-type': OFF,
    '@typescript-eslint/explicit-module-boundary-types': OFF,
    '@typescript-eslint/no-explicit-any': OFF,
    '@typescript-eslint/no-use-before-define': ERROR,
    '@typescript-eslint/no-unused-vars': WARN,
    'no-unused-vars': OFF,

    'react/jsx-filename-extension': [ERROR, { extensions: ['.tsx', 'ts', '.jsx', 'js'] }],
    'react/jsx-indent-props': [ERROR, 2],
    'react/jsx-indent': [ERROR, 2],
    'react/jsx-one-expression-per-line': OFF,
    'react/destructuring-assignment': OFF,
    'react/state-in-constructor': OFF,
    'react/jsx-props-no-spreading': OFF,
    'react/prop-types': OFF,

    'jsx-a11y/click-events-have-key-events': OFF,
    'jsx-a11y/no-noninteractive-element-interactions': OFF,
    'jsx-a11y/no-static-element-interactions': OFF,

    'lines-between-class-members': [ERROR, 'always'],
    // indent: [ERROR, 2, { SwitchCase: 1 }],
    'linebreak-style': [ERROR, 'unix'],
    quotes: [ERROR, 'single'],
    semi: [ERROR, 'always'],
    'no-unused-expressions': WARN,
    'no-plusplus': OFF,
    'no-console': OFF,
    'class-methods-use-this': ERROR,
    'jsx-quotes': [ERROR, 'prefer-single'],
    'global-require': OFF,
    'no-use-before-define': OFF,
    'no-restricted-syntax': OFF,
    'no-continue': OFF,
  },
};

- node_modules
 - eslint-import-resolver-node // 为啥没有安装它，它确在第一层

{
     A模块："1.0.0",
     B模块："1.0.0"
}

{
    C模块："1.0.0"
}

node_modules
 - A模块
 - B模块
  - C模块

node_modules
 - A模块
 - B模块
 - C模块

node_modules
 - A模块 1.0.0
 - B模块
 - C模块
    - A模块 2.0.0

{
  // tab缩进大小,默认为2
  tabWidth: 2,
  // 使用tab缩进，默认false
  useTabs: true,
  // 使用分号, 默认true
  semi: false,
  // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 行尾逗号,默认none,可选 none|es5|all
  // es5 包括es5中的数组、对象
  // all 包括函数对象等所有可选
  TrailingCooma: "none",
  // 对象中的空格 默认true
  // true: { foo: bar }
  // false: {foo: bar}
  bracketSpacing: true,
  // JSX标签闭合位置 默认false
  // false: <div
  //          className=""
  //          style={{}}
  //       >
  // true: <div
  //          className=""
  //          style={{}} >
  jsxBracketSameLine：false,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: 'always', 
}

module.exports = {
// stylelint的配置可以在已有配置的基础上进行扩展，之后你自己书写的配置项将覆盖已有的配置。
// 配置的含义，我们前面已经讲过简单提一下stylelint-config-rational-order是配置书写顺序的
  extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier'],
  // plugins一般是由社区提供的，对stylelint已有规则进行扩展
  // 也就说有些规则原本stylelint没有，就要插件自定义规则了
  // 'stylelint-declaration-block-no-ignored-properties'这个插件的作用是警告那些不起作用的属性
  plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties', 'stylelint-scss'],
  rules: {
  // rules不详述了，可以访问这个网站搜寻，https://stylelint.docschina.org/user-guide/plugins/
    'plugin/declaration-block-no-ignored-properties': true,
    'comment-empty-line-before': null,
    'declaration-empty-line-before': null,
    'function-name-case': 'lower',
    'no-descending-specificity': null,
    'no-invalid-double-slash-comments': null,
    'block-no-empty': null,
    'value-keyword-case': null,
    'rule-empty-line-before': ['always', { except: ['after-single-line-comment', 'first-nested'] }],
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,
  },
  // 忽略校验的文件，其中/**/*是glob语法，指的是所有文件和文件夹
  ignoreFiles: ['node_modules/**/*', 'build/**/*', 'dist/**/*'],
};

{
   // 编译选项，跟编译ts相关
  "compilerOptions": {
    // 指定编译的ECMAScript目标版本。
    // 枚举值："ES3"， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"，"ESNext"。
    // 默认值： “ES3”,ESNext包含提案的内容
    "target": "ES5",
    // 指定生成哪个模块系统代码。枚举值："None"， "CommonJS"， "AMD"， "System"， "UMD"，
    // "ES6"， "ES2015"，"ESNext"。默认值根据--target选项不同而不同，当target设置为ES6时，
    // 默认module为“ES6”，否则为“commonjs”
    "module": "ESNext",
    // 编译过程中需要引入的库文件的列表。比如没有esnext，Set、Reflect等api会被ts报错
    "lib": ["dom", "dom.iterable", "esnext"],
    // 是否允许编译javascript文件。如果设置为true，js后缀的文件也会被typescript进行编译
    "allowJs": true,
    // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
    "jsx": "react",
    // 下面详解 
    "isolatedModules": true,
    // 用于指定是否启用严格的类型检查，不过到底具体怎么严格我也不知道
    "strict": true,
    // 下面详解
    "moduleResolution": "node",
    // 下面详解
    "esModuleInterop": true,
    "resolveJsonModule": true,
    // 下面详解
    "baseUrl": "./",
    // 路径别名，跟webpack alias一样，注意你是ts的话，必须webpack和ts都配
    "paths": {
      "Src/*": ["src/*"],
      "Components/*": ["src/components/*"],
      "Utils/*": ["src/utils/*"]
    },
    
    // 以下两个是跟装饰器功能有关，experimentalDecorators是 是否开启装饰器
    // emitDecoratorMetadata是装饰器里的一个功能，如果你使用依赖注入，有可能需要开启它
    // 依赖注入不懂的同学可以略过，后面会写一篇关于学习nestjs前置知识的文章
    // 会讲怎么使用emitDecoratorMetadata实现依赖注入
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,

    // 禁止对同一个文件的不一致的引用。主要是文件大小写必须一致，比如引用a.js和A.js是不一样的
    "forceConsistentCasingInFileNames": true,
    // 忽略所有的声明文件（ `*.d.ts`）的类型检查
    "skipLibCheck": true,
    // 下面详解
    "allowSyntheticDefaultImports": true,
    // 不生成输出文件
    "noEmit": true
  },
  "exclude": ["node_modules"]
}

import { someType, someFunction } from "someModule";


someFunction();


export { someType, someFunction };
Try

export { someFunction };

function fn() {}
'index.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.'index.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.Try

declare const enum Numbers {
  Zero = 0,
  One = 1,
}
console.log(Numbers.Zero + Numbers.One);

"use strict";
console.log(0 + 1);

/Users/**/ts-test/src/b.ts
/Users/**/ts-test/src/b.d.ts
/Users/**/ts-test/b.ts
/Users/**/ts-test/b.d.ts
/Users/**/b.ts
/Users/**/b.d.ts
/Users/b.ts
/Users/b.d.ts
/b.ts
/b.d.ts

/Users/**/ts-test/src/node_modules/b.ts
/Users/**/ts-test/src/node_modules/b.d.ts
/Users/**/ts-test/src/node_modules/b/package.json(如果指定了main)
/Users/**/ts-test/src/node_modules/b/index.ts
/Users/**/ts-test/src/node_modules/b/index.d.ts

/Users/**/ts-test/node_modules/b.ts
/Users/**/ts-test/node_modules/b.d.ts
/Users/**/ts-test/node_modules/b/package.json(如果指定了main)
/Users/**/ts-test/node_modules/index.ts
/Users/**/ts-test/node_modules/index.d.ts

/Users/**/node_modules/b.ts
/Users/**/node_modules/b.d.ts
/Users/**/node_modules/b/package.json(如果指定了main)
/Users/**/node_modules/index.ts
/Users/**/node_modules/index.d.ts

/Users/node_modules/b.ts
/Users/node_modules/b.d.ts
/Users/node_modules/b/package.json(如果指定了main)
/Users/node_modules/index.ts
/Users/node_modules/index.d.ts

/node_modules/b.ts
/node_modules/b.d.ts
/node_modules/b/package.json(如果指定了main)
/node_modules/index.ts
/node_modules/index.d.ts

import React from "react";

import * as React from "react";

// @filename: utilFunctions.js
Module '"/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/utilFunctions"' has no default export.Module '"/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/utilFunctions"' has no default export.
const getStringLength = (str) => str.length;


module.exports = {
  getStringLength,
};


// @filename: index.ts
import utils from "./utilFunctions";


const count = utils.getStringLength("Check JS");

// @filename: utilFunctions.js
const getStringLength = (str) => str.length;
const allFunctions = {
  getStringLength,
};
module.exports = allFunctions;
module.exports.default = allFunctions;

 // before
 import React from 'react';
 console.log(React)
 // after
 var React = require('react');
 console.log(React['default'])


 // before
 import {Component} from 'react';
 console.log(Component);
 // after
 var React = require('react');
 console.log(React.Component)
 

 // before 
 import * as React from 'react';
 console.log(React);
 // after
 var React = require('react');
 console.log(React);

 // before
 export const name = "esm";
 export default {
   name: "esm default",
 };

 // after
 exports.__esModule = true;
 exports.name = "esm";
 exports["default"] = {
   name: "esm default"
 }

 // before
 import React from 'react';
 console.log(React);
 // after 代码经过简化
 // __importDefault规则如下：
 // 如果目标模块是 esm，就直接返回目标模块；否则将目标模块挂在一个对象的 defalut 上，返回该对象
 var react = __importDefault(require('react'));
 console.log(react['default']);


 // before
 import {Component} from 'react';
 console.log(Component);
 // after 代码经过简化
 var react = require('react');
 console.log(react.Component);
 
 
 // before
 import * as React from 'react';
 console.log(React);
 // after 代码经过简化
 // _importStar 规则如下
 // 如果目标模块是 esm，就直接返回目标模块。否则
 // 将目标模块上所有的除了 default 以外的属性挪到 result 上
 // 将目标模块自己挂到 result.default 上
 var react = _importStar(require('react'));
 console.log(react);

// 代码经过简化
var __importDefault = function (mod) {
  return mod && mod.__esModule ? mod : { default: mod };
};

var __importStar = function (mod) {
  if (mod && mod.__esModule) {
    return mod;
  }

  var result = {};
  for (var k in mod) {
    if (k !== "default" && mod.hasOwnProperty(k)) {
      result[k] = mod[k]
    }
  }
  result["default"] = mod;

  return result;
};

// 判读是否是生产环境，这里这个项目的作者取了一个巧，判断非develop环境是这样的
// process.env.NODE_ENV !== 'production'
// 这样写不要好，有可能你们公司有很多环境，比如还有预发、灰度环境等等
const isDevelopment = process.env.NODE_ENV !== 'production';
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  isDevelopment,
  isProduction,
};

// 以下是两个node模块
const path = require('path');
const fs = require('fs');

// 同步获取node执行的文件的工作目录, 我们的工作目录一般都是项目的根目录，这里就表示根目录
// 为啥这么说呢，因为package.json写着webpack --config ./scripts/config/webpack.prod.js
// webpack就是借助node的能力，它的 ./scripts就暴露是以项目目录为根目录
// 这里需要注意process.cwd和__dirname的区别
// process.cwd()返回当前工作目录。如：调用node命令执行脚本时的目录。
// __dirname返回源代码所在的目录
const appDirectory = fs.realpathSync(process.cwd());

// 获取绝对路径的方法函数
function resolveApp(relativePath) {
  return path.resolve(appDirectory, relativePath);
}

// 默认extentions
const moduleFileExtensions = ['ts', 'tsx', 'js', 'jsx'];

/**
 * Resolve module path
 * @param {function} resolveFn resolve function
 * @param {string} filePath file path
 */
function resolveModule(resolveFn, filePath) {
  // Check if the file exists
  const extension = moduleFileExtensions.find((ex) => fs.existsSync(resolveFn(`${filePath}.${ex}`)));

  if (extension) {
    return resolveFn(`${filePath}.${extension}`);
  }
  return resolveFn(`${filePath}.ts`); // default is .ts
}

module.exports = {
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appIndex: resolveModule(resolveApp, 'src/index'), // Package entry path
  appHtml: resolveApp('public/index.html'),
  appNodeModules: resolveApp('node_modules'), // node_modules path
  appSrc: resolveApp('src'),
  appSrcComponents: resolveApp('src/components'),
  appSrcUtils: resolveApp('src/utils'),
  appProxySetup: resolveModule(resolveApp, 'src/setProxy'),
  appPackageJson: resolveApp('package.json'),
  appTsConfig: resolveApp('tsconfig.json'),
  moduleFileExtensions,
};

module.exports = {
  output: {
    // ...
    assetModuleFilename: 'images/[name].[contenthash:8].[ext]',
  },
  // other...
  module: {
    rules: [
      // other...
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2?)$/,
        type: 'asset/resource',
      },
    ]
  },
  plugins: [//...],
}

module.exports = {
  //...
  cache: {
   // 默认type是memory也就是缓存放到内存中
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
  //...
};

cache.buildDependencies: {
    // 它的作用是当配置文件内容或配置文件依赖的模块文件发生变化时，当前的构建缓存即失效
    config: [__filename]
}

// 插件把 webpack 打包后的静态文件自动插入到 html 文件当中
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用来分离css为单独的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 添加打包进度条插件
const WebpackBar = require('webpackbar');
// 它在一个单独的进程上运行类型检查器，该插件在编译之间重用抽象语法树，并与TSLint共享这些树。
// 可以通过多进程模式进行扩展，以利用最大的CPU能力。
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
// 在webpack中拷贝文件和文件夹
const CopyPlugin = require('copy-webpack-plugin');
// 引入路径工具，上文已讲
const paths = require('../paths');
// 引入环境判断工具，上文已讲
const { isDevelopment, isProduction } = require('../env');
// 引入配置文件，上文已讲
const { imageInlineSizeLimit } = require('../conf');

// 这个函数是用来加载css相关loader的函数
// 如果是开发环境用style-loader，将css内嵌到html中，反之css单独打包
const getCssLoaders = (importLoaders) => [
  isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
  {
    loader: 'css-loader',
    options: {
      modules: false,
      sourceMap: isDevelopment,
      importLoaders,
    },
  },
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          require('postcss-flexbugs-fixes'),
          isProduction && [   // 开发环境不使用postcss-preset-env加浏览器前缀，加快打包时间
            'postcss-preset-env',
            {
              autoprefixer: {
                grid: true,
                flexbox: 'no-2009',
              },
              stage: 3,
            },
          ],
        ].filter(Boolean),
      },
    },
  },
];

module.exports = {
  // 入口信息
  entry: {
    app: paths.appIndex,
  },
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
  // 这里可以设置extensions和别名
  // extensions就是webpack会识别的文件后缀的顺序，
  // 如果你是tsx建议放到第一位，否则你写成['ts','tsx']会先检测是否是ts文件，不是才接着看是不是tsx
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.json'],
    alias: {
      Src: paths.appSrc,
      Components: paths.appSrcComponents,
      Utils: paths.appSrcUtils,
    },
  },
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    axios: 'axios',
  },
  module: {
    rules: [
      {
        test: /\.(tsx?|js)$/,
        loader: 'babel-loader',
        options: { cacheDirectory: true }, // 这是一个webpack优化点，使用缓存
        exclude: /node_modules/, // 这个也是webpack优化的点 exclude排除不需要编译的文件夹
      },
      {
        test: /\.css$/,
        use: getCssLoaders(1),  // 这个讲得就是importLoaders属性运用，上面已经讲了
      },
      {
        test: /\.scss$/,
        use: [
          ...getCssLoaders(2),
          {
            loader: 'sass-loader',
            options: {
              sourceMap: isDevelopment,
            },
          },
        ],
      },
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], 
        type: 'asset', // webpack5自带的loader，webpack4依赖file-loader
        parser: {
          dataUrlCondition: {
            maxSize: imageInlineSizeLimit,
          },
        },
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2?)$/,
        type: 'asset/resource', // webpack5自带的loader，webpack4依赖file-loader
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ // 这个模块是重点，下面详细讲
      template: paths.appHtml,
      cache: true,
    }),
    new CopyPlugin({ // 这个是复制文件或者目录的插件
      patterns: [
        {
          context: paths.appPublic,
          from: '*',
          to: paths.appBuild,
          toType: 'dir',
          globOptions: {
            dot: true,
            gitignore: true,
            ignore: ['**/index.html'],
          },
        },
      ],
    }),
    // 打包进度条插件
    new WebpackBar({
      name: isDevelopment ? 'RUNNING' : 'BUNDLING',
      color: isDevelopment ? '#52c41a' : '#722ed1',
    }),
    // 插件功能上面已写
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        configFile: paths.appTsConfig,
      },
    }),
  ],
};

    new HtmlWebpackPlugin({
        ...
        chunksSortMode: function (chunk1, chunk2) {
            var order = ['common', 'public', 'index'];
            var order1 = order.indexOf(chunk1.names[0]);
            var order2 = order.indexOf(chunk2.names[0]);
            return order1 - order2;  
        }
    })

devServer: {
    // 提供静态文件目录地址
    // 基于express.static实现, 所以这里你如果不请求静态文件，这个属性没啥用
    contentBase: path.join(__dirname, 'dist'),
    // 任意的 404 响应都被替代为 index.html
    // 基于node connect-history-api-fallback包实现
    // 我们知道vue和react有hash路由和history路由
    // history路由需要设置这个参数为true，要不你刷新页面会空白屏
    historyApiFallback: true,
    // 是否一切服务都启用 gzip 压缩
    // 基于node compression包实现
    compress: true,
    // 是否隐藏bundle信息
    noInfo: true,
    // 发生错误是否覆盖在页面上
    overlay: true,
    // 是否开启热加载
    // 必须搭配webpack.HotModuleReplacementPlugin 才能完全启用 HMR。
    // 如果 webpack 或 webpack-dev-server 是通过 --hot 选项启动的，那么这个插件会被自动添加
    hot: true,
    // 热加载模式
    // true代表inline模式，false代表iframe模式
    inline: true, // 默认是true
    // 是否自动打开
    open: true,
    // 设置本地url和端口号
    host: 'localhost',
    port: 8080,
    // 代理
    // 基于node http-proxy-middleware包实现
    proxy: {
        // 匹配api前缀时，则代理到3001端口
        // 即http://localhost:8080/api/123 = http://localhost:3001/api/123
        // 注意:这里是把当前server8080代理到3001，而不是任意端口的api代理到3001
        '/api': 'http://localhost:3001',
        // 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求
        // 主要解决跨域问题
        changeOrigin: true,
        // 针对代理https
        secure: false,
        // 覆写路径：http://localhost:8080/api/123 = http://localhost:3001/123
        pathRewrite: {'^/api' : ''}
    }
}

// 这个插件最开始讲了，一下的插件就略过都讲过了
const { merge } = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const common = require('./webpack.common.js');
const paths = require('../paths');
const { shouldOpenAnalyzer, ANALYZER_HOST, ANALYZER_PORT } = require('../conf');

module.exports = merge(common, {
  mode: 'production', 这个需要细讲，下面说
  output: {
    filename: 'js/[name].[contenthash:8].js',
    path: paths.appBuild,
    assetModuleFilename: 'images/[name].[contenthash:8].[ext]',
  },
  plugins: [
     // 打包后会有dist（或者build，名字在output里设置）目录
     // 再次打包时需要把之前的dist删掉后，再次生成dist
     // 这个插件就是其删掉作用的
    new CleanWebpackPlugin(),
    // 提取css的插件
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].chunk.css',
    }),
    // 开启分析工具的插件，分析包的体积
    shouldOpenAnalyzer &&
      new BundleAnalyzerPlugin({
        analyzerMode: 'server',
        analyzerHost: ANALYZER_HOST,
        analyzerPort: ANALYZER_PORT,
      }),
  ].filter(Boolean),
  // 这个重点下面讲
  optimization: {
    concatenateModules: false,
    minimize: true,
    minimizer: [
      // new TerserPlugin({ // 这个常用配置后面下面讲
      //   extractComments: false,
      //   terserOptions: {
      //     compress: { pure_funcs: ['console.log'] },
      //   },
      // }),
      new CssMinimizerPlugin(), // css压缩插件
    ],
    splitChunks: { // 这个是重点下面讲
      chunks: 'all',
      minSize: 0,
    },
  },
});

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- devtool: 'eval',
 optimization: {
    moduleIds: 'named',
    chunkIds: 'named'
  }
}

// webpack.production.config.js
module.exports = {
  + mode: 'production'
  - plugins: [
  -   new webpack.DefinePlugin({ "process.env.NODE_ENV": '"production"' }),
  -   new webpack.optimize.ModuleConcatenationPlugin(),
  -   new webpack.NoEmitOnErrorsPlugin(),
  -   new TerserPlugin(/* ... */),
  - ]
  }

{
   文件路径1：function()xx,
   文件路径2：function()xx,
   文件路径3：function()xx,
}

// webpack.pord.config.js
module.exports = {
  optimization: {
    sideEffects: true
  }
};

// webpack.pord.config.js
module.exports = {
  optimization: {
    flagIncludedChunks: true
  }
};

//app.js
import "my-static-module";

if(some_condition_is_true){
  import ("my-dynamic-module")
}
console.log("My app is running")

module.exports = {
  optimization: {
    chunks: async | initial | all
  }
};

module.exports = {
   splitChunks: {
      cacheGroups: {
        common: {
          chunks: 'async' | 'all' | 'initial',
          minSize: 0,
          minChunks: 1,
        },
      },
    },
};