自定义 webpack 配置4：优化配置

参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置

1. 保持版本最新

较新的版本能够建立更高效的模块树以及提高解析速度。

1.1 Node.js

1.1.1 最新版本

v14.7.0

1.1.2 查看本地版本

node -v
//或者
node --version

1.1.3 下载安装最新版本

1.2 npm

1.2.1 最新版本

v6.14.7

1.2.2 查看本地版本

npm -v
//或者
npm --version

1.2.3 更新版本

• 包含在Node.js 安装包内。Node.js 最新，npm 最新
• fancy-install-unix
• npm install npm@latest -g

1.3 yarn

1.3.1 最新版本

v1.22.4

1.3.2 查看本地版本

yarn -v
//或者
yarn --version

1.3.3 更新版本

• brew install yarn 无法更新到最新版本
• curl -o- -L https://yarnpkg.com/install.sh | bash 更新成功

1.3 webpack

1.3.1 最新版本

v4.44.1

1.3.2 查看本地版本

package.json 查看即可

1.3.3 更新版本

• 使用 npm 更新
• 使用 yarn 更新

2. 减少 loader 作用范围

以 babel-loader 为例,可以明显减少构建时间