項目初始化

項目初始化

標籤（空格分隔）： 前端項目

[toc]

---

1.0 git倉庫創建和項目目錄的劃分

1.1 新建git項目

1.11 生成密匙

（1）查看是否已經有了ssh密匙，cd ~/.ssh
（2）生成 ssh-keygen -t rsa -C "郵箱地址"，按三個回車，密碼爲空，最後獲得兩個文件id_rsa和id_rsa.pub
（3）輸入cat ~/.ssh/id_rsa.pub查看密匙，去github新建的項目中輸入生成的密匙
（4）在本地項目文件中，git clone "項目倉庫的ssh"，項目鏈接成功。鏈接ssh能夠省去輸入帳號密碼
複製代碼

1.12 初始化本地倉庫

（1）刪除文件夾中的全部文件
（2）進入本地項目文件，git init初始化倉庫
（3）git remote add origin ssh鏈接遠程倉庫
（4）git pull origin master鏈接倉庫master分支
複製代碼

1.2 gitignore配置

• 設置.gitignore能夠在push時忽略一些文件

1.3 文件目錄的劃分

• 切換分支：git checkout -b mmall_v1.0 -b表示新建分支

2.0 webpack對腳本的處理

###2.1 js用什麼loader加載

• babel，ES2015，polyfill不能保證IE8兼容問題，使用自帶的js-loader

2.2 官方文檔上的例子中entry只有一個js，咱們有多個怎麼辦

• 將'entry'設置成對象，提供多個入口；同時出口文件也要有對應，否則會被最後一個入口文件覆蓋

entry: {
        'common': ['./src/page/common/index.js'], 
        'index' : ['./src/page/index/index.js'],
        'login' : ['./src/page/login/index.js'],
    },
複製代碼

2.3 output裏要分文件夾存放目標文件，怎麼設置

• 在output的filename屬性中加文件夾路徑

output: {
        path: './dist',
        filename: 'js/[name].js'
    },
複製代碼

2.4 jquery引入方法

• 直接在html頁面中引入CDN，IE8不支持jQuery2.0以上的版本，

• npm加載的須要在每一個js文件中require，適合模塊化編譯，須要在config文件裏設置。

externals : {
        'jquery' : 'window.jQuery'
    }
複製代碼

2.5 提取公共模塊

plugins : [
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',//文件名稱
            filename : 'js/base.js'//輸出的文件名稱
        })
    ]
複製代碼

在page新建common，entry新加一個入口文件
複製代碼

3.0 webpack對樣式的處理

3.1 樣式使用什麼loader

module : {
        loaders : [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
複製代碼

3.2 webpack打包的css怎麼獨立成單獨的文件

new ExtractTextPlugin("css/[name].css"),
複製代碼

4.0 webpack對html模板的處理

• 使用條件：須要對每一個html都添加版本號；在src文件夾下，發佈時候只發布dist文件

var HtmlWebpackPlugin = require('html-webpack-plugin');

//獲取HTML-webpack-plugin參數的方法
var getHtmlConfig = function(name) {
    return {
        template : './src/view/' + name + '.html',
        filename : 'view/' + name + '.html',
        inject   : true,
        hash     : true,
        chunks   : ['common', name]
    };
};
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
複製代碼

5.0 webpack對icon-font和圖片的處理

{ test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50&name=resource/[name].[ext]' },
複製代碼

6.0 webpack-dev-server

• 將webpack-dev-sever打包進common模塊中，對線上環境沒有影響，只是開發時用的工具

//環境變量配置dev | online
var WEBPACK_DEV       = process.env.WEBPACK_DEV || 'dev';

if ('dev' === WEBPACK_DEV) {
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
複製代碼

6.1 修改npm啓動命令

"scripts": {
    "dev_win"  : "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
    "dist_win" : "set WEBPACK_ENV=online && webpack -p"
  },
複製代碼

7.0 完整webpack.config.js配置文件

var webpack           = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//環境變量配置dev | online
var WEBPACK_DEV       = process.env.WEBPACK_DEV || 'dev';
//獲取HTML-webpack-plugin參數的方法
var getHtmlConfig = function(name) {
    return {
        template : './src/view/' + name + '.html',
        filename : 'view/' + name + '.html',
        inject   : true,
        hash     : true,
        chunks   : ['common', name]
    };
};
//webpack config
var config = {
    entry: {
        'common': ['./src/page/common/index.js'], 
        'index' : ['./src/page/index/index.js'],
        'login' : ['./src/page/login/index.js'],
    },
    output: {
        path: './dist',
        publicPath : '/dist',
        filename: 'js/[name].js'
    },
    externals : {
        'jquery' : 'window.jQuery'
    },
    module : {
        loaders : [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
            { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50&name=resource/[name].[ext]' },
        ]
    },
    plugins : [
        //獨立通用模塊到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',//文件名稱
            filename : 'js/base.js'//輸出的文件名稱
        }),
        //把css單獨打包到文件裏
        new ExtractTextPlugin("css/[name].css"),
        //html模板處理
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
    ]
};
if ('dev' === WEBPACK_DEV) {
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

module.exports = config;
複製代碼

7.1 依賴包

"devDependencies": {
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "style-loader": "^0.17.0",
    "url-loader": "^0.5.8",
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.16.5"
  }
複製代碼