只知道 webpack 怎么拼怎么用的我.. 被领导委托搭建移动端项目框架...
此时的我:
咱虽然对 Webpack 一窍不通, 也得保持风度
- "那个大哥, 咱这边移动端用啥 UI 框架?"
- "得过几天想想.. 搞不好咱们自己手写一套"
这时候我的动力来了: UI 框架? 做 UI 框架不是我一直梦寐以求的事情吗?
"好的老板. 一定完成任务"
熟练的打开 PowerShell, 把 vue 脚手架搞好, 把多页面跟着教程配置好.
OK, 接下来遇到难题了:
这个配置方式只支持最基本的多页面!!
什么意思呢? 如果我在 src/page 下创建一个 passport 文件夹. 里面放好同名 html js vue 文件后, 再在 passport 文件夹下创建一个 reg 文件夹, 里面放同名页面架构. 这样会造成 reg.html 无法打包.
想了一下, 这种问题一般是通配符的原因. 可能是通配符不够深.
但是看了一眼 webpack 相关配置文件夹.. 顿时就怕了...
这都是些啥玩意... 每个文件都代表什么啊..
于是我花了一下午的时间自己捋了一下. 差不多就这个意思 (如图)
- 1.build.js //webpack 的核心打包工具.
- 2.webpack.*.conf.js //webpack 的独立环境配置和插件配置. 如生产环境, 测试环境等. 一般每个环境一个文件
- 2.webpack.base.conf.js // 配置项目目录别名, 资源文件打包配置的地方 (src/assets)
- 3.*.env.js // 配置项目环境私有变量的地方
- 4.index.js // 配置项目打包后资源文件路径, dev 环境端口号和服务器配置的地方
OK, 基本缕清了 webpack 架构之后, 让我们验证猜想吧.
果不其然, 在配置完多页面之后. 教程中一段代码是这么寻找的 js/html
(原谅我第一张图忘记画箭头了)
果真是通配符方式查找页面 JS. 于是改成 /**/*.js ,/**/*.html. 果真解决问题
好的 现在我们 2 级子页面终于找到了. 但是打包发现有点问题. such as
打包前:
打包后:
很好 二级页面变为了一级页面
那我访问 passport/reg.html 岂不是就访问不到了?
这种问题肯定不能去容忍. 于是我着手解决这个问题.
于是在 utils.js 文件内 找到了这样一行代码:
这段代码的意思是找到绝对路径的最后一个 "/" 和它后面的最后一个 "." 截取其中的文件名. 然后打包出来
有点意思. 相当于如果我的目录是 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 文件夹和页面文件夹同级了??
这样比之前更乱了..
于是找了许久, 在 webpack.*.conf.js 文件内找到了 js/css 输出的相对路径
这段代码的大体意思根据 css/js 文件名模板输出打包后的文件. 但是前面加一个文件夹的路径, 他也会自动创建该文件夹
于是把 css/ 和 js / 去掉. 成功解决问题
太开心了!! 这下项目架构应该正常了吧
让我跑一下看看.. 嗯.. 图片怎么跑出来和页面文件夹同级了??
难不成.... 是刚才去掉 static 为资源输出文件夹的问题??
通过查看谁在使用 "assetsSubDirectory" 这个属性时, 发现了一个叫 CopyWebpackPlugin 的 webpack 插件
- new CopyWebpackPlugin([
- {
- from: path.resolve(__dirname, '../static'),
- to: config.dev.assetsSubDirectory,
- ignore: ['.*']
- }
]) 复制代码
查了一下 webpack 的 document 文档. 插件的作用是, 将你项目资源文件夹原封不动地 copy 到你打包目录的某个文件夹.
那这样就好解决了, 我把 to 写死了不久就 ok 了么
to: './static'复制代码
这样打包下来, 资源和代码都正常了. 感觉还有点小成就感
这时候, 老大又发话了:
"咱们这个系统是有好多环境的. 不同的环境有不同的网关"
这可难住我了.. 到最后仔细看了一下, 其实就是每个环境不同的专属常量而已.. 方便接口地址不需要写域名. 直接 get 全局网关 + 路径就行
于是我每个环境都 copy 了一份不同的 webpack.*.conf.js ,*.env.js. 其中 *.env.js 是存储环境私有常量的
*.env.js 配置如下:
- 'use strict'
- const merge = require('webpack-merge')
- module.exports = {
- NODE_ENV: '"development"', // 区别线上环境 / 生产环境的变量
- SERVER_URL: '"****"', // 网关. 通常用于接口域名配置
- IS_DEBUG: true // 是否允许开启 Vue Tools
- }
复制代码
然后 webpack.*.conf.js 需要配置一下:
const env = require('../config/dev.env'); 复制代码
这样你在你自己的代码中就可以获取全局常量了
示例:
- <template>
- <div class="aaa">
- <span>
- 这是 index {{getBaseURL}}
- </span>
- </div>
- </template>
- <script>
- export default {
- name: "index",
- computed: {
- getBaseURL() {
- return process.env.SERVER_URL; // 返回网关地址
- }
- }
- }
- </script>
- <style scoped>
- .aaa {
- color: red;
- }
</style > 复制代码
然后页面正确显示网关地址
至此. 整个项目框架基础部分算是搭建完毕. 搭建完毕后我对 webpack 也了解个一半左右了....
当然, UI 框架的制作心得我在后期总结完毕也会写出来. 感谢大家支持!
有错误欢迎指正!
参考资源:
用 vue 构建多页面应用 https://segmentfault.com/a/1190000011265006
webpack 中文文档 https://www.webpackjs.com/concepts/
来源: https://juejin.im/post/5b7e8e0d6fb9a01a0b3195f1