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