搞定之后，仿佛有种世界在手的错觉。
得益于parcel，Webpack4 相比3 还是改动了蛮多.开始喊出让用户开箱即用的口号。

1.mode 的设置，默认为 production，设置后可以在编译过程中替换调 process.env.NODE_ENV, 即替代了之前的这段代码：

new webpack.DefinePlugin({
  'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
})

2.上面是说在编译时拿到环境变量，而有的时候会需要在 webpack 配置文件获取，比如：

process.env.NODE_ENV === 'production' ? '[name].css?v=[chunkhash:4]' : '[name].css'

这里几经分析，妄想也使用mode，然并卵，最终选择

cross-env NODE_ENV=development|production

当然mode的设置也是直接通过这个拿到了

3.推荐一个插件 ProvidePlugin

new webpack.ProvidePlugin({
  'React':     'react',
  'Component': ['react', 'Component'],
  'ReactDOM':  'react-dom'
})

替换每次在业务代码里写入

import React, { Component } from "react";
import ReactDOM from "react-dom";

4.前面提到说Webpack4减少了配置，换句话就是增加了预设。所以，当默认的配置无法满足时，就是我们自己动手的时刻
https://webpack.js.org/configuration/optimization 官方详细文档介绍

• optimize-css-assets-webpack-plugin、uglifyjs-webpack-plugin 两者配合压缩 CSS 与 JS
• CommonsChunkPlugin > optimization.splitChunks ， 默认情况下，一个 import 引入就会被抽出

最后没有了，都是中规中矩的配置了。