git+webpack项目初始化<一>

目录结构

src +

page

view

image

service

util

git初始化

linux常用命令

rm -rf mmall-fe/ 删除

mkdir mmall-fe 创建文件夹

ls -al 显示所有文件

cd .. 返回上一级

cat text.html 查看文件内容

rm -rf dist/ 删除文件夹(所有内容)

rm text.html 删除文件

touch test.json 创建一个test.txt文件

ls -b 显示文件列表

vim index.html 创建并编辑

:wq 退出编辑状态并保存

本地仓库和远程关联

git init git初始化,生成.git文件

如果没有ssh则生成ssh key cd ~/.ssh 切换到生成密钥的目录 ls 看是否有idrsa、idrsa.pub文件，如果没有需要手动生成。 ssh-keygen 生成ssh key cat id_rsa.pub 查看公钥 登录github。打开setting->SSH keys，点击右上角 New SSH key填入公钥

git remote add origin git@git....git 将origin文件夹和远程文件夹对应

git pull origin master 拉取代码(master分支)

git status 查看状态(看不到新建空文件夹,git只追踪文件和文件父目录)

git add . 文件追踪

git commit -am 'xxxx' 提交到本地版本(-am 提交全部,并加上注释)

git push 提交到远程服务器上

git push --set-upstream origin master 设置当前分支的远程对应分支

.gitignore文件
/node_modules/
-/dist/

git分支:

git checkout <分支名>

git checkout -b mall_v1.0 (切换分支,-b新建一个分支,并切换)

git branch 查看所有分支(前面带*为当前所在分支)

NPM初始化

npm init 初始化npm

npm install安装依赖包

npm install <依赖包>[@版本号]

npm uninstall 卸载依赖包

g全局安装

webpack安装配置

webpack安装

npm install webpack -g 全局安装

npm install webpack @1.15.0 --save-dev项目安装

webpack -v 查看版本 --save-dev 开发辅助工具依赖 --save 业务代码依赖包

配置webpack.config.js

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

webpack loaders

html:html-webpack-plugin/html-loader

js:babel-loader + babel-preset-es2015

css:style-loader+css-loader

image+font:url-loader

常用命令

webpack 不压缩打包

webpack -p 线上发布压缩打包

webpack --watch 监听静态文件变化自动编译

webpack --config webpack.config.js 配置

webpack [-p] [源文件] [目标文件]

前端开发服务器webpack-dev-server npm install webpack-dev-server --save-dev
webpack-dev-server/client?http://localhost:8080
webpack-dev-server --port 8088 --inline