进一步处理样式相关

1. 增加mini-css-extract-plugin，用于提取css文件

2. 增加postcss和autoprefix，增加浏览器前缀

3. 把样式处理的相关loader收敛到config/utils.js里。

4. 添加了less-loader的相关配置

   虽然我确实不喜欢用less，但也不排斥别人用，所以想了想，还是把less-loader加了进来

5. 精细化配置了开启css module的范围。只对src目录下的css、less和scss文件开启。对来自node_modules的css、less和scss则不要开启。

目录结构

├── build
│   ├── build.js
│   ├── webpack.config.base.js
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── config
│   ├── utils.js
│   └── index.js
├── src
│   ├── app.tsx
│   ├── customer.d.ts
│   ├── index.tsx
│   ├── style.css
│   └── style.scss
├── index.html
├── .browserslistrc
├── postcss.config.js
├── package.json
└── tsconfig.json

代码

gitee.com/z-dennis/mi…

用babel替代ts-loader

1. 用ts-loader处理ts和tsx文件时，依然要用babel来处理后续编译过程

2. babel比ts-loader快

3. babel底层所依赖的@babel/plugin-transform-typescript不会进行类型检查，所以，在开发时，就不会出现，一不小心写错类型，导致的页面报错。

   我最喜欢第3条，毕竟，我认为，ts是方便编程的。不是每个人都是ts类型体操高手，写错一个类型，就直接页面报错，这个在开发过程中，真的会让人很不爽。

目录结构

├── build
│   ├── build.js
│   ├── webpack.config.base.js
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── config
│   ├── utils.js
│   └── index.js
├── src
│   ├── app.tsx
│   ├── customer.d.ts
│   ├── index.tsx
│   ├── style.css
│   └── style.scss
├── index.html
├── .babelrc.js
├── .browserslistrc
├── postcss.config.js
├── package.json
└── tsconfig.json

代码

gitee.com/z-dennis/mi…

添加@babel/preset-env

简单来说，这玩意就是用来做polyfill的，以前通过@babel/polyfill 来做，7.4.0之后，@babel/polyfill 被废弃了，就通过@babel/preset-env + core-js 来做。

值得一提的是，core-js的v3和v2不兼容，版本要注意一下

目录结构

目录结构无变化，主要在.babelrc.js增加@babel/preset-env的配置。

代码

gitee.com/z-dennis/mi…