前端项目工程构建教程(二)项目目录的搭建

原创 在下乃坑爹君 随笔 WebPack 1736阅读 2017-06-28 23:54:52 举报

#项目目录的搭建
接下来我们要开始搭建项目了
直接建立并且编辑.gitignore文件
vim .gitignore

.gitignore使用说明

有些时候我们不希望把一些编译的东西提交到git中,.gitignore可以方便管理我们不需要提交的文件,自动过滤设置的文件。
Git提供了一种可配性很强的机制来允许用户将指定的文件或目录排除在版本控制之外,它会检查代码仓库的根目录下是否存在一个名为.gitignore的文件,如果存在的话就去一行行读取这个文件中的内容,并把每一行指定的文件或目录排除在版本控制之外。注意.gitignore中指定的文件或目录是可以使用“*”通配符的。

输入了vim .gitignore之后,然后在里面加入:
.DS_Store
/node_modules/
/dist/
表示我们不希望将上面三个文件夹提交到git中,然后推出vim:按Esc,推出编辑模式,然后按shift+;,再输入q!(不保存)或者wq!(保存)

接下来输入$ git status查看下情况

前端项目工程构建教程(二)项目目录的搭建
上面显示了一些信息,表示之前创建的,也就是在前一篇文章前端项目工程构建教程里创建了个文件index.html,表示被删除了,同时也创建修改了.gitignore文件的意思

接下来我们就推送到仓库里去

前端项目工程构建教程(二)项目目录的搭建

前端项目工程构建教程(二)项目目录的搭建

$ ls -al查看所有文件:
total 14
drwxr-xr-x 1 Administrator 197121 0 6月 28 22:30 ./
drwxr-xr-x 1 Administrator 197121 0 6月 27 23:18 ../
drwxr-xr-x 1 Administrator 197121 0 6月 28 22:40 .git/
-rw-r--r-- 1 Administrator 197121 32 6月 28 22:30 .gitignore
-rw-r--r-- 1 Administrator 197121 7 6月 27 23:18 README.md

创建并切换分支

$ git checkout -b veki1.0

前端项目工程构建教程(二)项目目录的搭建

关于分支的常用命令

创建分支: $ git branch mybranch
切换分支: $ git checkout mybranch
创建并切换分支: $ git checkout -b mybranch

更新master主线上的东西到该分支上:$git rebase master

切换到master分支:$git checkout master

更新mybranch分支上的东西到master上:$git rebase mybranch

提交:git commit -a

对最近一次commit的进行修改:git commit -a –amend

commit之后,如果想撤销最近一次提交(即退回到上一次版本)并本地保留代码:git reset HEAD^
合并分支:(merge from) $ git checkout master
$ git merge mybranch (merge from mybranch)
删除分支: $ git branch -d mybranch
强制删除分支: $ git branch -D mybranch
列出所有分支: $ git branch

####好了,我们该创建项目目录了:

前端项目工程构建教程(二)项目目录的搭建

前端项目工程构建教程(二)项目目录的搭建

项目脚手架的搭建

npm install

安装依赖包:npm install xxx@v.v.v
卸载依赖包:npm uninstall xxx@v.v.v
参数:-g
参数:--registry=https://registry.npm.taobao.org

在用webpack之前,我给大家介绍下这个开发
#webpack

webpack 特点

代码拆分

Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。

Loader

Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。

智能解析

Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./templates/" + name + ".jade")。

插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。

快速运行

Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。

总结下来其主要的优势:

按需加载模块,按需进行懒加载,在实际用到某些模块的时候再增量更新
webpack 是以 commonJS 的形式来书写脚本,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
能被模块化的不仅仅是 JS 了,能处理各种类型的资源。
开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
扩展性强,插件机制完善

安装:npm install webpack -g 全局安装
npm install webpack1.15.0 --save-dev(这个安装版本非常稳定)
webpack -v 查看版本

##webpack.config.js
entry:js的入口文件
externals:外部依赖的声明
output:目标文件
resolve:配置别名
module:各种文件,各种loader
plugins:插件

##webpack loaders
html:html-webpack-plugin/html-loader
js:babel-loader + bable-preset-es2015
css:style-loader + css-loader
image+font:url-loader

##webpack常用命令
webpack 最基本的启动webpack命令
webpack -p 对打包后的文件进行压缩
webpack --watch 自动监控文件的改变
webpack --config webpack.config.js 配置文件

##webpack-dev-server
作用:前端开发服务器
特色:可以在文件改变时,自动刷新浏览器
安装:npm install webpack-dev-server -save-dev
配置:webpack-dev-server/client?http://localhost:8088

#接下来请继续看另外一片文章:webpack的安装与使用

评论 ( 1 )
最新评论
lingwer111 2017-07-01 01:20:05 1F

这么多图文,用前端网的文本编辑器是不是贼难受