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

栏目: 编程工具 · 发布时间: 6年前

内容简介:只知道Webpack怎么拼怎么用的我。。被领导委托搭建移动端项目框架。。。此时的我:

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

此时的我:

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

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

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

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

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

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

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

OK,接下来遇到难题了:

这个配置方式只支持最基本的多页面!!

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

想了一下,这种问题一般是 通配符 的原因。可能是通配符不够深。

但是看了一眼webpack相关配置文件夹。。顿时就怕了。。。

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

前端项目框架搭建随笔---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

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

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

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

果真是通配符方式查找页面JS。于是改成/**/*.js ,/**/*.html。果真解决问题

好的 现在我们2级子页面终于找到了。但是打包发现有点问题。such as

打包前:

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

打包后:

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

很好 二级页面变为了一级页面

那我访问passport/reg.html岂不是就访问不到了?

这种问题肯定不能去容忍。于是我着手解决这个问题。

于是在utils.js文件内 找到了这样一行代码:

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

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

有点意思。相当于如果我的目录是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踩坑记

这样比之前更乱了。。

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

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

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

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

这段代码的大体意思根据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'复制代码

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

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

这时候,老大又发话了:

“咱们这个系统是有好多环境的。不同的环境有不同的网关”

这可难住我了。。到最后仔细看了一下, 其实就是每个环境不同的专属常量而已。。方便接口地址不需要写域名。直接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构建多页面应用

webpack中文文档


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Mechanics of Web Handling

The Mechanics of Web Handling

David R. Roisum

This unique book covers many aspects of web handling for manufacturing, converting, and printing. The book is applicable to any web including paper, film, foil, nonwovens, and textiles. The Mech......一起来看看 《The Mechanics of Web Handling》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具