漫漫的webpack刨坑记

手撕webpack是一个很漫长的历程，因为这一道槛毕竟是高级前端开发必闯的一道“鬼门关”！所以，该来的还是会来的，倒不如早入坑早脱身！

1、能让单纯的webpack服务跑起来，需要的核心依赖总结如下（2020.11.07）：

"devDependencies": {
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
}

注：webpack-cli当前最新版本是4.2.0，全抛出一个报错 Cannot find module 'webpack-cli/bin/config-yargs'，不得不降低到3.3.12以解决问题。

2、构建一个能让react核心功能跑起来的最基础的依赖，现在把它总结如下（2020.11.07）：

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
}

注：有状态组件和无状态组件同时默认都是可以支持的，支撑框架起起来的核心依赖是 babel-preset-react，没了它，什么都是凉的！

3、构建一个简易的vue核心脚手架，为什么叫核心？因为以下依赖缺一不可，只是为了刨坑，没别的意思哈（2020.11.08）

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^2.0.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^5.4.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
}

注：以上所列出所有依赖中，如缺少babel-preset-env时，会抛出 ReferenceError: Unknown plugin "transform-es2015-modules-commonjs" specified in... 的一个异常，问题报得很模糊。可能是个人能力有限吧，花了很大精力才排查出来这个原因的。另外经过验证，webpack4.x 只需要 vue-style-loader 和 css-loader 即可实现样式，但 webpack5.x 就不行了，必须使用 style-loader 和 css-loader 即可生效。实在想不通这么优化的意义是什么。