前言
任何不讲版本的webpack相关的配置都是耍流氓！很多模块的不同版本之间，仿佛两个东西一样，这导致海量的教程只有少数能用的，占用我们大量的时间去搜索，而我这里要做的就是把它们系统的整理出来，形成一个切实可用的文档。好了，我们开始吧！
PS：我用的基本都是最新版本，所以趟了不少坑！这里整个环境都是自己搭建的，没有使用create-react-app脚手架，大家可以参考我之前的教程：
https://zhuanlan.zhihu.com/p/74449115
目录
生成HTML
TypeScript环境配置
scss和css文件的加载和分离
css压缩
静态资源加载
完整配置
生成HTML
曾经我天真的以为，HTML就是引入一个入口文件，自己写就完了，可后面做css分离的时候，分离出来的css死活加载不上。
后来仔细一分析，顿时觉得自己有点傻，css都分离出来了，肯定是以link的形式加载了。然而css文件名加了hash，不可能写死，然后尝试了一下使用webpack生成HTML文件，css文件成功加载。好了，让我们看看怎么用吧。
安装html-webpack-plugin插件和html-loader：
npm install -D [email protected]
npm install -D [email protected]
我们先写一个HTML文件作为html-webpack-plugin的模板，代码如下：
<!DOCTYPE html>
配置loader加载器
然后在webpack配置文件中加入插件：
new
filename是打包后生成的文件名，template是我们之前添加的模板。
chunks是入口，excludeChunks是排除的入口，我自己试了一下，当chunk只指定app，index.html中还是引入了其他入口，因此要排除掉。这里main是Electron入口，我们把它排除掉。
minify是压缩选项，我们可以对生成的html文件进行压缩。
执行配置，我们会发现在output目录下会生成一个html文件，文件引入了我们的js入口文件。
TypeScript环境配置
关于TypeScript环境配置，大家可以参考上面的教程，这里就不多说了。
scss和css文件的加载和分离
关于react的css实践，目前有几种方式：
1.react 原生css这种方式是把css当js来写，这种方式局限性太多，因此没有选择它。
2.Radium也是写到了js里面，感觉怪怪的，不选~
3.Css Modules我选择了Css Modules的方式，它可以使css和js分离，还能用scss等技术。缺点是类名不能使用横杠，不过loder可以把它变成驼峰方式加载，也有加载器可以支持横杠。
这里用到的插件和加载器有如下几个，我们先引入进来：
npm install -D [email protected]
npm install -D [email protected]
npm install -D [email protected]
mini-css-extract-plugin的作用是加载和分离css文件。
typings-for-css-modules-loader让我们可以像使用js模块一样引入css和scss文件。
sass-loader用来加载scss。
配置加载器：
该配置同时支持css，sass和scss的加载。
使用mini-css-extract-plugin分离css文件，它会把外部的css和scss转化后的css打包到一起，配置如下：
plugins
下面我们尝试写一个简单的app.scss文件，代码如下：
.
那么在tsx文件怎么使用呢，就像这样：
import
在这里温馨提示一下大家，看文档最好看
官方文档，否则要多踩很多坑，我之前看了别人的文档是这么使用的：
import
结果怎么都不行，还是看了官网才搞定。
这里还有
一个坑，当我们使用上面的方式加载时，会提示模块不存在。无论怎么修改路径，结果都一样。
这里我之前陷入了一个误区，以为scss文件和其它tsx模块一样，其实我们看TypeScript文档就可以知道，TypeScript模块是要有导出的，如果是外部的js文件，还要引入.d.ts文件。所以，如果我们想采用import的方式引入scss或者css文件，就要同时为其写一个.d.ts文件。
而typings-for-css-modules-loader也考虑到了这一点，当我们执行构建时，它会为scss或者css文件生成一个对应的.d.ts文件，这时我们就可以像使用其他TypeScript模块一样使用scss了。
最后还有一个点需要说明的是，由于.d.ts文件没有实际作用，我们应该告诉webpack在打包时忽略它们，配置也很简单：
plugins
不过这个组件也有写缺陷，就是他的.d.ts文件不会自动更新，首次或者修改后去构建会报错，它的官网也写了这个问题，目前还没有更好的办法。
Typescript doesnt find the typings
As the webpack process is independent from your typescript "runtime" it may take a while for typescript to pick up the typings. Any hints on how this could be fixed deterministically are welcome!
如果大家有更好的办法，请留言，万分感谢！！！
css压缩
我们使用optimize-css-assets-webpack-plugin压缩css文件，与此同时，必须指定js压缩插件，否则webpack不再对js文件进行压缩。我们使用terser-webpack-plugin插件压缩js。
引入插件：
npm install -D [email protected]
npm install -D [email protected]
使用方式为：
module
静态资源加载
使用url-loader加载资源文件：
npm install -D [email protected]
使用方式如下：
完整配置
webpack.config.prod.js:
const
![webpack最新版本_安装webpackwebpack的官网安装webpack[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)