前端项目框架搭建随笔 --- Webpack 踩坑记

前端项目框架搭建随笔 --- Webpack 踩坑记
0

只知道 Webpack 怎么拼怎么用的我,被领导委托搭建移动端项目框架。

image

咱虽然对 Webpack 一窍不通,也得保持风度。

“那个大哥,咱这边移动端用啥UI框架?”

“得过几天想想,搞不好咱们自己手写一套。”

这时候我的动力来了:UI 框架?做 UI 框架不是我一直梦寐以求的事情吗?

“好的老板,一定完成任务”

熟练地打开 PowerShell,把 vue 脚手架搞好,把多页面跟着教程配置好。

OK,接下来遇到难题了: 这个配置方式只支持最基本的多页面!!

什么意思呢? 如果我在 src/page 下创建一个 passport 文件夹,里面放好同名 html js vue 文件后,再在 passport 文件夹下创建一个 reg 文件夹,里面放同名页面架构,这样会造成 reg.html 无法打包。

想了一下,这种问题一般是 通配符 的原因,可能是通配符不够深。但是看了一眼 Webpack 相关配置文件夹,顿时就怕了。

这都是些啥玩意?每个文件都代表什么啊?

image

于是我花了一下午的时间自己捋了一下,差不多就这个意思。

1. build.js //Webpack 的核心打包工具。

2. webpack.*.conf.js //Webpack 的独立环境配置和插件配置,如生产环境,测试环境等。一般每个环境一个文件
3. webpack.base.conf.js //配置项目目录别名,资源文件打包配置的地方(src/assets)

*4. .env.js // 配置项目环境私有变量的地方

5. index.js // 配置项目打包后资源文件路径,dev 环境端口号和服务器配置的地方

OK,基本缕清了 Webpack 架构之后,让我们验证猜想吧。果不其然,在配置完多页面之后,教程中一段代码是这么寻找的 js/html。

image

image

(原谅我第一张图忘记画箭头了)

果真是通配符方式查找页面 JS,于是改成

//*.js ,//*.html

果真解决问题。好的,现在我们 2 级子页面终于找到了,但是打包发现有点问题,比如:

image
打包前

image
打包后

很好,二级页面变为了一级页面,那我访问 passport/reg.html 岂不是就访问不到了?这种问题肯定不能去容忍,于是我着手解决这个问题,在 utils.js 文件内 找到了这样一行代码:

image

这段代码的意思是找到绝对路径的最后一个“/”和它后面的最后一个“ . ”截取其中的文件名,然后打包出来, 有点意思。

相当于如果我的目录是

D:/demo/src/page/index/index.js

它就会截取 index;

如果我的目录是

D:/demo/src/page/passport/reg/reg.js

它就会只截取 reg。

这样就会造成输出的文件是同级目录。

找到病因了,那就解决呗。

于是换一种思路去想:既然我的页面都是在 src/page 文件夹下,那我找到 page 后面的“/”然后一直截取到最后一个“.” 这样它不就带层级关系了吗?于是把代码换成这个:

let filename = filePath.substring(filePath.indexOf("pages") + 6, filePath.lastIndexOf('.'))

这段代码的意思是先找到 “pages” 的下标,然后 +6 个下标找到 pages 后面的“/”,最后截取到最后一个“.”

于是 reg 页面输出为:

/passport/reg/reg

OK,这时候再次打包,发现目录层级终于正确了。

这下终于有个项目架构的样子了,但是大哥还不满意:

“这样,你把 css 和 js 文件放在 html 同级目录下吧。不要让它在单独的文件夹内了”

what?这又是什么鬼??

经过观察,打包后的资源文件放在了 static 文件夹下。顺藤摸瓜,找到了一个看起来像是资源目录配置的属性:

assetsSubDirectory: 'static', 

于是我把它换成了:

assetsSubDirectory: ‘’,

这样打包后,发现 css js 文件夹和页面文件夹同级了?

image
这样比之前更乱了。

于是找了许久,在 webpack.*.conf.js 文件内找到了 js/css 输出的相对路径。

image
image

这段代码的大体意思根据 css/js 文件名模板输出打包后的文件。但是前面加一个文件夹的路径,它也会自动创建该文件夹。 于是把 css/ 和 js/ 去掉,成功解决问题。

太开心了!!这下项目架构应该正常了吧。

让我跑一下看看,嗯,图片怎么跑出来和页面文件夹同级了?难不成是刚才去掉 static 为资源输出文件夹的问题?通过查看谁在使用 “assetsSubDirectory” 这个属性时,发现了一个叫 CopyWebpackPlugin 的 Webpack 插件。

image

查了一下 Webpack 的 document 文档。插件的作用是, 将你项目资源文件夹原封不动地 copy 到你打包目录的某个文件夹。 那这样就好解决了,我把 to 写死了不久就 ok 了么。

image

这样打包下来,资源和代码都正常了,感觉还有点小成就感。

image

这时候,老大又发话了:“咱们这个系统是有好多环境的,不同的环境有不同的网关。”

这可难住我了,到最后仔细看了一下, 其实就是每个环境不同的专属常量而已,方便接口地址不需要写域名,直接 get 全局网关+路径就行。

于是我每个环境都 copy 了一份不同的 webpack.*.conf.js , **.env.js。其中 .env.js 是存储环境私有常量的。 *.env.js 配置如下:

image

然后 webpack.*.conf.js 需要配置一下:

image

这样你在你自己的代码中就可以获取全局常量了,示例:

然后页面正确显示网关地址。

至此,整个项目框架基础部分算是搭建完毕。搭建完毕后我对 Webpack 也了解个一半左右了。 当然,UI 框架的制作心得我在后期总结完毕也会写出来。 感谢大家支持!

有错误欢迎指正!

本文转自 freeCodeCamp 微信公众号