前言
任何不讲版本的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 html-webpack-plugin@3.2.0
npm install -D html-loader@0.5.5
我们先写一个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 mini-css-extract-plugin@0.8.0
npm install -D typings-for-css-modules-loader@1.7.0
npm install -D sass-loader@7.2.0
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 terser-webpack-plugin@1.4.1
npm install -D optimize-css-assets-webpack-plugin@5.0.3
使用方式为:
module
静态资源加载
使用url-loader加载资源文件:
npm install -D url-loader@2.1.0
使用方式如下:
{
完整配置
webpack.config.prod.js:
const
注意:我的是Electron环境,大家不要完全拷贝。