前言 公司据说要搞前后端分离,趁这两天项目完成的差不多,抓紧时间学习一下前端知识 现在流行前端项目工程化,那么第一个问题就是如何创建工程(项目),第一次玩webpack 通过 NPM 创建项目 # 创建项目 npm init -y -y 在这里是表示快速新建.使用 npm init 来初始化,终端会一步一步提示输入 name.version.description 等项目 meta 信息,通过使用 flag -y 跳过所有的 prompt,一路到底完成默认值的初始化. 完成后 NPM 会自动在目…

背景 我司前端项目框架主要是 vue,多个项目聚集在同一个仓库下,共用公共组件.页面.工具函数等.基于以上前提,我们需要对不同的项目分别进行打包,并解决单页应用强制刷新引起的问题,所以没有使用 vue-cli 来创建,而是使用 webpack 重新编写了一套打包流程. 随着代码量的增长(百万行级),加之电脑硬件性能不高等因素,我感觉项目初次启动时间越来越慢,目前大概在一分半到两分钟之间.某次编译启动时间如下: 泄特!这大大降低了开发体验. 找方案 网络上有很多关于 webpack 构建时间优化的…

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入…

一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使用内置调试器来调试浏览器中网页的插件.于是打算折腾一下试试. 踩了很多坑, 配置lanuch.json, 运行一直失败, 原因就是因为该项目是由webpack构建, 需要先启动项目, 然后再启动调试器 1. 启动项目 npm start 只有项目启动后, 配置的lanuch.json才有效!!! 2…

这几天尝试用node开发一个网站,后端的接口已经初步开发完成,现在开始构建前端的项目,记录下过程,在学习下吧. 用vue-cli 构建项目,myproject.(构架过程略过) 每次在本地构建项目后和远程仓库关联的时候会发现每次都出现种种问题,这一次我要记录下,关联的过程,对自己来说也是一次总结吧 这一次我选择的是github,(国内现在可以使用码云,应该比github快,有机会去尝试一下): 第一步:打开github 这是用vue构建的项目,安装依赖后运行正常 在这个项目根目录下,打开git…

开始之前,需要安装node环境.(安装过程在此就不啰嗦了)   1.创建基本结构 首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录. 创建一个没有任何依赖关系的package.json,可以通过命令行 npm init 创建. 配置下基本信息即可. 创建一个index.html文件,这个是显示在浏览器中的页面. 注意: 1.这里的暂时并不存在: 2.的数据会被vue文件填入. 创建一个src文件夹,并在文件夹内新建一个main.js文件: 这样我们就完成了一个关于…

我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤: git更新最新的代码 构建项目 把构建后的代码上传到服务器 如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以上的步骤了,而且根据需求,可以实现更多的功能. 1.下载安装jenkin 1.1 java环境 jenkins需要运行在Java的环境中,所以前提是需要先安装jdk,测试jdk是否安装好,在命令行输入:java -version 1.2 下载jenkins 下载地址 jenkins下载 下载后点击安…

原文链接 Docker单独部署前端项目和Node项目是非常便捷的,在这里分享一下Docker的使用,主要聊聊它的部署实践.(我是window10专业版安装Docker) Docker Docker是一种应用容器引擎技术,类似于虚拟机,不过它的实用性.通用性.便捷性更强,Docker容器可以说就是VM,不过占用资源更少,更轻量,通过操作系统级虚拟化方法,利用更加节省的硬件资源提供给用户更多的计算资源. Docker容器是Linux 容器的一种封装,由于容器存在独立的运行环境,Docker可以将应用…

https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反,fekit帮我们做了很多事情,还屏蔽了许多细节,让开发人员能够专注于开发过程.不过随着fekit的升级,也出现了一些问题,同时fekit和公司业务及发布流程有一定耦合,所以觉得采用开源的构建方案. 在使用gulp的过程中,基本也是依据使用fekit的思路来逐步完善构建过程的,所以还是要感谢fekit…

webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · 输出 · 配置 · 组件 · 加载器 · 插件 · 模块 · 模块热替换 下面我们一步步的搭建webpack,逐步讲解上诉模块 开发环境 推荐使用JetBrain的Webstorm,有强大的代码提示,支持JSX和ES6语法: 我们将会使用npm来下载和构建依赖,现在网上也有很多人使用yarn来安装,…