-
Notifications
You must be signed in to change notification settings - Fork 46
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
从零配置webpack 4+react脚手架(四) #7
Comments
非常有用,谢谢 |
详细到位 深入浅出 很感谢 |
很有幸帮助到了你 |
作者您好,我最近也在做脚手架这方面的总结,这四篇文章对我帮助很大,我想在我的总结系列前几篇中可能会比较大地参考您这几篇文章的内容,当然,我会在参考链接中标注您文章的,完成后我将我的 issue 链过来您帮看看怎么样:) |
当然可以!这四篇文章算是对webpack有比较的基础理解,但其实还有很多要学习的。 |
非常好!!!尤其前2片文章对我帮助很大,下一步我要自己加入Antd了。 |
|
点赞大佬 |
前言
经过前三节的学习,我们已经大概能自己配出一个react脚手架了,但是仍有许多配置未完成,比如图片,字体图标的配置,Source Map的配置等,通过前面的学习,我相信你已经能够做到这些简单的配置了,实在还不是很清楚,那我们就往下看吧!
添加图片的loader
file-loader
可以对图片文件进行打包,但是url-loader
可以实现file-loader
的所有功能,且能在图片大小限制范围内打包成base64图片插入到js文件中,这样做的好处是什么呢?先一步一步走着!安装url-loader
这里需要注意,url-loader依赖于file-loader,所有我们两个loder都要安装
引入url-loader
在
webpack.common.config.js
中的rules中添加一个新的对象,并输入以下代码:原来的文件名.后缀
;接下来就是测试下可以不可以用了,在
src
目录下新建一个文件夹:images
,并导入一个图片文件,名为background.png
,图片文件点我下载。然后在
app.js
中写如下代码:在
app.less
中写如下代码:执行
npm run build
,你去dist目录下看看是不是多了一个images/background.png,这是因为我们的文件有300多kb,远远超出了我们设定的8kb,如果你在limit设置为:819200,你再重新编译一次,你会发现这个图片文件没有被打包出来,因为它以base64格式图片导入到了bundle.js中。你可以看看index.html是啥样子的!~~
添加字体图标loader
字体图标需要我们之前已经安装过的
file-loader
,配置非常简单,但是具体操作还是得给你讲明白一点安装file-loader
如果你不确定自己是否安装,在package.json中看看有没有依赖项
引入file-loader
在
webpack.common.config.js
中添加以下代码:将iconfon图标导入项目
我们先在
![image.png](https://camo.githubusercontent.com/cd128d58f144fc2cbb7940e789065aa7013845cec4058c3010c5a7ff50627edf/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323031392f706e672f3334313331342f313537313034313633373439342d33636536343663622d643832362d343034352d626464332d3633633134656263393032642e706e6723616c69676e3d6c65667426646973706c61793d696e6c696e65266865696768743d353438266e616d653d696d6167652e706e67266f726967696e4865696768743d31303936266f726967696e57696474683d31373136267365617263683d2673697a653d313737393731267374617475733d646f6e652677696474683d383538)
src
目录下新建一个文件夹:font
。然后我们去iconfont官网找几个图标,(若没有注册,先注册再添加至新项目)比如我添加了一个 爱心 图标至我的webpack-demo项目,点击下载至本地:
找到该文件夹,把
eot\svg\ttf\woff\woff2
为后缀的文件全部剪切进我们新建的font
文件夹中,把iconfont.css
文件中的代码复制到我们的app.less
中,但因为我们的几个字体文件放到了font文件夹,我们需要更改url:然后在
app.js
中使用:这时候你再打包,回到页面看看是不是我们的图标正确显示了。
![image.png](https://camo.githubusercontent.com/99d340c6bf2dc2e74eda9afc82d2e332f218b72b075d6e681d16f688a45e09cd/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323031392f706e672f3334313331342f313537313034323637373732342d32333735643636342d316135372d346333332d386465362d3531663465373066353736382e706e6723616c69676e3d6c65667426646973706c61793d696e6c696e65266865696768743d323137266e616d653d696d6167652e706e67266f726967696e4865696768743d343334266f726967696e57696474683d32353536267365617263683d2673697a653d353539343032267374617475733d646f6e652677696474683d31323738)
我的html文件内容如下:
配置source-map
source-map是干嘛用的?我们先来修改以下
app.js
中的代码,故意给它制造一个错误:我们增加了一个控制台打印输出语句,如果正常的话我们会在控制台中看到打印输出:I cannot print to console!
![image.png](https://camo.githubusercontent.com/6c78d434fee3242418baf2129366f7bae7499aaeec594b53486bf53df95e2f87/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323031392f706e672f3334313331342f313537313034333238383330352d33613534313831652d633635372d343633642d616132612d3364623630396662383638612e706e6723616c69676e3d6c65667426646973706c61793d696e6c696e65266865696768743d3438266e616d653d696d6167652e706e67266f726967696e4865696768743d3936266f726967696e57696474683d31343732267365617263683d2673697a653d3431363830267374617475733d646f6e652677696474683d373336)
但是我们把console.log故意制造了语法错误,写成consele.log。这个时候我们去控制台查看:
它的错误提示是我们的打包文件bundle.js,这是打包之后的文件,我们想知道的是我们源码文件的错误地方,不然你还要通过查看打包文件的错误,回溯到我们源码的错误地方,特别麻烦,那有没有一个方法能让我们控制台直接提示的是源码错误出处呢?答案就是
source-map
它的配置非常简单,只需要在
webpack.common.config.js
中增加一个devtool
属性即可!这里为什么是
cheap-module-eval-source-map
,你可查阅这个文档:devtool然后我们再打包一次,这次去控制台看看,它的错误提示是不是我们源码位置了:
![image.png](https://camo.githubusercontent.com/20c97cc1edfa8e5bbefc64e2f65ba228c977ae3f6319c66ea569acb409d06927/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323031392f706e672f3334313331342f313537313034333731343432312d35613966376161372d346439652d343261612d616536642d3036373966386330336665342e706e6723616c69676e3d6c65667426646973706c61793d696e6c696e65266865696768743d313535266e616d653d696d6167652e706e67266f726967696e4865696768743d333130266f726967696e57696474683d393830267365617263683d2673697a653d313037373638267374617475733d646f6e652677696474683d343930)
ps:右边的错误提示不是再app.js是因为我们定义了两个入口文件,可能会有相互依赖的关系,这里我也不是很清楚,知道的同学可以交流下。
这一节结束,我们这系列文章就算是结束了,其实还有很多可以优化的手段,比如建立单独的配置文件,让我们不用手动去找webpack配置进行修改啦;比如懒加载(lazy-loading)啦。。。这些大家有兴趣可需求可自行了解,这个系列文章主要和大家一起进行一些简单的配置,快速上手。
结语:花了大概四天完成这个系列的文章,作为自己的一个记录,也希望能帮到像我一样的新手,webpack的学习还任重道远,与大家共勉!
The text was updated successfully, but these errors were encountered: