Webpack

作业格式 课程名称： 软件工程1916|W（福州大学） 作业要求： 团队作业第二次—项目选题报告 团队名称： 那周余嘉熊掌将得队 作业目标：确定和分析选题，绘制评审表 团队信息： 队员学号 队员姓名 博客地址 备注 221600131 Jamin https://www.cnblogs.com/JaminWu/ 队长 221600308 我超可爱的 http://www.cnblogs.com/XNC-SoCute/ 221600305 haziza http://www.cnblogs.com/haziza/ 221600340 你看见我的小熊了吗 https://www.cnblogs.com/stereohearts/ 221600426 Hunterj Lin https://www.cnblogs.com/HunterJ/ 021600823 玫葵 https://www.cnblogs.com/offeroques/ 选题报告 ========== 1、选题题目 <center> **福州大学服务外包与软件设计实验室对外网站** </center> 2、选题背景、概况、意义 背景 福州大学服务外包与软件设计实验室成立于2013年，位于福州大学数学与计算机科学学院3号楼201室，是一个充满创新和热情的团队。实验室通过搭建开放的技术交流学习空间

一、基础创建 1、首先安装vue-cli npm install -g vue-cli 2、创建一个使用webpack模板的项目 vue init webpack my-project 3、进入目录 cd my-project 4、安装依赖 npm install 5、启动vue项目 npm run dev 二、项目中安装和引入sass npm install node-sass --save npm install stylus-loader --save 三、全局引入sass文件 scss文件中定义了常量函数等，避免.vue文件每次都@import引入 1、添加依赖： npm install sass-resources-loader -- save- dev npm install sass-loader --save 2、修改build/utils.js： scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/css/rem.scss') } } ) 3、vue文件中设置 <style lang="scss" scoped> .title { font-size

1.起步，准备 首先你需要到node.js的官网下载一个叫做node的软件下载完成后你就会得到node附赠的一个npm工具。当你安装完成后。打开命令行分别输入node -v回车和npm -v回车你就会看到版本号。切换国内镜像以提升下载速度。 npm install -g cnpm --registry =htttps://registry.npm.taobao.org 通过cnpm -v来验证是否安装成功。接下来就是安装webpack。命令如下 cnpm install -g webpack weboack-cli 安装Vue Cli 命令cnpm install -g @vue/cli 2.第一个vue应用 这里我们选择的时候webstorm。在file处选择新建项目之后选择新建vue的项目。可能构建的时间有些长不要着急稍微等一会马上就好。 当你的第一个vue应用被建出来后他大概是这个样子的。 这里你会看到就算有一个前端项目也是会占用端口的。 3.模板语法 vue的语法非常严格引用了就要声明使用。不然就会报错。 模板语法的结构基本上是这样的。当然这里有一点值得强调就是在template下只允许有一个根就是那个叫App的盒子。这里我们要说的是插值表达式。他的作用就是将data中的数据或者是其他的一些数据渲染进DOM中但是不同的是他是不会解析HTML中的标签的。在data中

本文大约 3000 字。 目录 1，选择构建工具 1.1 Gulp 1.2 Webpack 1.3 选择 Gulp 还是 Webpack？ 2，在 vue.config.js 中配置文件压缩选项 3，使用环境变量 4，使用别名 5，使用全局 less 变量 源码 参考链接 1，选择构建工具 在现在的前端开发中，前后分离、模块化、版本控制、文件合并与压缩、mock数据等，是在大前端开发避不开的概念 。在开发的时候，以组件的方式分别开发，在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中，这样的模块化方案一直是前端架构师在解决和优化的焦点之一。 1.1 Gulp 美 [ɡʌlp] Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。 Gulp是对整个过程进行控制，在其配置文件gulpfile.js中配置的每一个task。例如：对sass文件进行预编译： gulp.task('sass',function(){ gulp.src('src/styles/*.scss') .pipe(sass().on('error',sass.logError)) .pipe(gulp.dest('./build/prd/styles/'));//编译后的输出路径 }); 上面这个task可以对 'src

本文大约 1500 字。 目录 hash 三种 hash 在 vue.config.js 中配置 hash 源码 hash 以前使用 JQuery 开发前端页面的时候，页面中引用的资源文件如js、css等，一般尾部加一个 t=[时间戳] 参数，用于防止修改不生效。现在工程化开发，使用 Webpack 编译，打包的资源文件路径里自动带有一串随机字符串，称为 hash： <link href=/static/css/chunk-vendors.d637be65.css rel=preload as=style> “ d637be65 ”即是hash。每次 build 都会生成不同的 hash，所以每次编译部署，都不会有缓存问题。 这个 hash 是如何生成的？它的生成机制是什么？ 三种 hash Webpack 打包后的资源按大小分有三类，从小到大排列： module，即模块，每个引入的文件就是一个module，常言模块化，是开发中的物理最小代码单位 chunk， N 个模块打包在一起形成的的一个文件（如果 chunk 有 split，则每个分开的文件都是一个独立的 chunk） bundle，一次工程编译打包的最终产物，有可能就是 chunk，也有可能包含多个chunk的综合体 这三类资源都可以生成 hash，粒度从低到高依次为： hash，根据每次编译的内容计算所得

我认为现在是写最这篇文章最好的时刻了。 写在前面 有输入，有沉淀，才有分享。 在过去的四个月中，我全身心投入到一个综合平台的前端开发上，该项目采用的是我搭建的 vue3 基础代码框架(说实话，一开始我也怕到处都是坑...)，而这个基础代码库 （仓库地址） 现在在github上已经收获了 100+ star 了，得到了一些伙伴的肯定与帮助；另外，基于此代码框架的一个中等业务量的综合平台以及后台系统都已经稳定运行在测试环境中，即将发布正式环境(可算是没白摸鱼...)；加上我自身间接性的拖延厌恶症(游戏耍腻了)，于是便想记录一下这段时间的感想，因此，我认为现在是写这篇文章最好的时刻了。 当然，我的表述中也许还有不足和错误，烦请指出。 vue3 现状 vue3 相对于vue2的好处不再介绍，更好的响应式、函数式、模版编译优化等等...但是大多数还未上手或者处于观望状态的伙伴多是有以下的疑问——vue3 现在哪个版本了？坑还多吗？周边生态支持得怎么样？TypeScript支持度以及使用丝滑度怎样？存在浏览器兼容问题吗？Options Api 和 Composition Api 又如何抉择？ 就以上问题，根据个人这段时间开发感受而言，可以简略回答为：距离vue3第一个正式版本One Piece发布将近四个月了，这中间差不多每个月有一次bug修复的小版本更新（极少的功能新增），api 已经稳定