后端路由项目由 gulp 改为 webpack 的踩坑实录
前言
公司有个后端路由的项目是用 gulp 作为前端自动化构建工具,最近学习了一下 webpack,深感其强大,一狠心将其改成了 webpack 构建,以下是踩坑实录。
gulp
先来说说原来的架构。
该项目是个 后端路由 的项目,我们以域名 www.abc.com
为例。假设有以下两个路由 www.abc.com/about
和 www.abc.com/join
,因为路由后端已经构建好,这个时候我们是可以打开这两个页面的。
后端模版为 php 的 twig(当然可以是其他任何模版),这两个路由分别对应两个 twig 模版(当然也可以是同一个模版)。因为网站首尾类似,所以我们有另外两个公用的 twig 模版分别是 header.twig 和 footer.twig,供其他单个页面的模版引用(twig 套 twig)。我们在 header.twig 以及 footer.twig 中分别引入 css 和 js 文件,大概这样:
// header.twig 中引入公共 css 和 模块需要的 css
<link rel="stylesheet" href="{{ cdn('/global/css/global.css') }}"/>
<link rel="stylesheet" href="{{ cdn('/' ~ moduleName ~ '/css/' ~ moduleName ~ '.css') }}"/>
// footer.twig 中引入模块需要的 js
<script crossorigin src="{{ cdn('/' ~ moduleName ~ '/script/' ~ pageName ~ '.js') }}"></script>
变量 moduleName 和 pageName 我们在具体的单个页面(比如 /about 路由对应的 about.twig 中)定义,这样就能引用到。
前端方面,用 sass 作为 css 预处理工具,requirejs 作为 js 模块化工具(r.js 打包),gulp 进行自动化构建,也就是说,最后打开的单个页面,除了公共部分的 js(至少得有 requirejs) 和 css(一些公共样式表,比如 bootstrap),还分别有一个页面独属的 js 和 css 文件。
大概就是这样,gulpfile 需要注意的几点有:
我们用 browserSync 做前端 server 以及热重载工具,因为默认打开的 url 类似
localhost:3000
,实际需要指向的是www.abc.com
,所以需要加入一个 proxy 参数,参数值www.abc.com
const browserSync = require('browser-sync').create('proxy') gulp.task('bs', () => { return browserSync.init({ proxy: "www.abc.com" }); });
监听 sass 文件以及 js 文件,如果文件改变,则编译(sass -> css,es6 -> es5)后重载页面(browserSync.reload),当然还需要监听模板页面(改变即重载)
打包用的是 requirejs 在 node 端的工具 r.js
gulp 整体的使用流程还是很符合常人的思考方式的。
webpack
既然 gulp 那么好用,为何要学习 webpack?对于我而言,最难受的地方是 每引入一个模块都需要在 requirejs 中配置,这点不能忍,而且,rjs 打包实在太慢了,这点还没有与 webpack 的打包速度比较过。rjs 打包过程可以自己在 gulpfile 中配置,当页面模块多的时候我们可以分模块打包(打包就是自己写脚本,比较自由),webpack 貌似一运行 webpack
就默认全部打包了?这点还有待后续学习。
我们将 gulpfile 中需要做的几件事列出来,分别用 webpack 去实现,核心就是以下三件:
- server,proxy,热重载
- sass -> css,es6 -> es5
- rjs 打包
第一件,webpack 可以直接用 webpack-dev-server 工具,关于 proxy,我们可以这样配置(需要做整站的 proxy):
devServer: {
proxy: {
"/": {
target: "http://www.abc.com",
changeOrigin: true
}
}
}
如果代码被 entry 中的配置文件所引用,并且改变,就会重载浏览器。js 文件没有问题,sass 可以被 js 文件引用,重载也没有问题,需要思考下模版文件的重载。
第二件,我们可以配置 module,以下简单配置了 sass 和 css 的转换(还需要配置 babel, todo):
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
这样我们就可以在 js 中引入 sass 和 css 文件了。
第三件,比较麻烦,webpack 默认单入口单出口,但是因为是后端路由的项目,不可能只打包生成一个 js 文件,需要配置多个入口多个出口,打包生成多个 js 文件。
我们来看下目录结构,原始 js 文件的地址是 src/xx/js/xx.js
形式,打包后的地址(也就是线上文件引用的地址)是 build/xx/js/xx.js
(将 src 替换成 build)即可。
下面这样配置是可以的:
entry: {
'course/js/apply.js': './src/course/js/apply.js',
'course/js/content.js': './src/course/js/content.js'
// others
},
output: {
filename: "./build/[name]"
}
也就是 ./src/course/js/apply.js
打包后的地址是 ./build/[name]
,此时 name 值为 course/js/apply.js
,所以带入后实际就是 ./build/course/js/apply.js
。一个个列出来显然麻烦(这不是跟 requirejs 一样了),写个脚本自动吧。
function getEntry() {
// Walker options
let files = walkSync('src')
let entry = {}
files.forEach(item => {
if (item.endsWith('.js')) {
entry[item] = './src/' + item
}
})
return entry
}
这里找了个 同步 获取文件夹下所有文件的包 walk-sync,生成入口参数。(我觉得这样写入口不优雅,暂时能用, todo)
ok,这样就大功告成了!每个页面引用单个 js,js 中可以引入 sass。
后语
用了一段时间的 gulp,gulp 本身是不提供模块化工具的,如果需要模块化,还是要引入类似 requirejs、seajs 一些的框架,或者使用 webpack 插件,但是 webpack 本身甚至提供了所有 gulp 能有的功能,关键还是自带模块化,何乐而不为呢?
我觉得我已经路转粉了。
后端路由项目由 gulp 改为 webpack 的踩坑实录的更多相关文章
- webpack 入门踩坑
参考来源:知乎张轩 安装 先装好node和npm,因为webpack是一个基于node的项目.然后 npm install -g webpack 全局安装 还可以在当前项目里面也安装一个webpack ...
- webpack打包踩坑之TypeError: Cannot read property 'bindings' of null
file loader介绍:https://www.webpackjs.com/loaders/file-loader/ babel loader介绍:https://webpack.js.org/l ...
- webpack初学踩坑记
注意事项: 1. webpack不用装在全局环境下,在哪个项目中使用,就安装在该项目下即可 1. 问题一:npm init 初始化一个项目后,添加webpack.config.js文件,在该项目中通过 ...
- 前后端分离项目(十):实现"改"功能(前后端)
好家伙,本篇介绍如何实现"改" 我们先来看看效果吧 (这可不是假数据哟,这是真数据哟) (忘记录鼠标了,这里是点了一下刷新) First Of All 我们依旧先来理一下思路: ...
- 在IIS上部署 .Net Core 3.0 项目踩坑实录
在IIS上部署 .Net Core 3.0 项目的主要流程有: 安装并启用IIS 安装AspNetCoreModuleV2 添加.配置网站 设置应用程序池 通过VS发布 一.安装并启用IIS: 安装了 ...
- Core WebApi项目快速入门(三):踩坑笔记
目前做公司一个项目,遇到了一些坑.跟大家分享,避免再次采坑. 1. 服务端发布应用报错 在windows server上发布程序报错.系统缺少更新包. https://support.microsof ...
- Electron – 项目报错整理(打包~2): electron-packager踩坑
- 抛弃vue-webpack-template,踩坑Vue-Cli创建vue项目
官方指导网站https://cli.vuejs.org/ 一.全局安装@vue/cli //本人包管理工具使用yarn yarn global add @vue/cli 安装完成 二.创建vue项目 ...
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...
随机推荐
- 自动创建win计划任务
@echo off set NAME=refrash IE set TIME=20:01:00 set DAY=MON,TUE,WED,THU,FRI,SAT,SUN set COMMAND=cscr ...
- CubieBoard开发板数据源介绍
1: Linaro/Ubuntu Linaro is a not-for-profit engineering organization consolidating and optimizing op ...
- 抓取60000+QQ空间说说做一次数据分析
对于QQ空间的数据一直来是垂涎不已,老早就想偷过来研究研究,这几天闲下来便开始动手... 整个程序的流程为:登录-->获取cookie-->获取所有的好友qq_number-->根据 ...
- linux指令大全
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...
- 编写一个矩形类,私有数据成员为矩形的长( len)和宽(wid),wid设置为0,有参构造函数设置和的值,另外,类还包括矩形的周长、求面积、取矩形的长度、取矩形的长度、取矩形的宽度、修改矩形的长度和宽度为对应的形参值等公用方法。
class Rectangle { private double len, wid; public Rectangle()//求矩形周长 { len = 0; wid = 0; } public Re ...
- NYOJ--1058--dfs--部分和问题
/* Name: NYOJ--1058--部分和问题 Author: shen_渊 Date: 15/04/17 19:27 Description: 简单的DFS,以为马上过的,递归的i+1写错了, ...
- python3.6----datetime.timedelta
学习利用python进行数据分析---时间序列分析的时候发现python2.7版本的timedelta模块跟python3.6模块区别python2.7:in:delta= datetime(2017 ...
- Alpha版与Beta版
简单说说这两个词的意思,以后会稍加更多的补充. Alpha版意在对少数主要客户和市场进行数量有限的分发,用于演示目的的早期构造.其无意在实际环境中使用.使用Alpha版的所有人员必须了解确切内容和质量 ...
- 朱世杰恒等式的应用-以CF841C为例
题目大意 Codeforces 841C Leha and Function. 令\(F(n,k)\)为在集合\(\{x|x \in [1,n]\}\)中选择一个大小为k的子集,最小元素的期望值. 给 ...
- adb不是内部或外部命令
1.安卓环境没配好, 2.tools下面没有adb.exe这个程序 3.2.3以后,adb.exe这个程序在platform-tools下而不是在tools下,所有环境变量的tools改成platfo ...