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