项目初始化

时间 2019-12-07

标签项目初始化繁體版

原文原文链接

项目初始化

标签（空格分隔）：前端项目css

[toc]html

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"
  }
复制代码