项目初始化「建议收藏」

项目初始化「建议收藏」项目初始化

大家好,又见面了,我是你们的朋友全栈君。

项目初始化

标签(空格分隔): 前端项目

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

转载于:https://juejin.im/post/5c00ea195188252098022be6

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107172.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号