大家好,又见面了,我是你们的朋友全栈君。
项目初始化
标签(空格分隔): 前端项目
[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账号...