git&webpack常用命令和配置解读-CFANZ编程社区

git —— 最常用的代码版本管理工具

git的服务端常见的有【GitHub】、【coding.net】、【码云】等。

Linux下安装git

sudo yum -y install zlib-devel openssl-devel cpio expat-devel gettext-devel curl-devel perl-ExtUtils-CBuilder perl-ExtUtils-MakeMaker

window下安装git

下载安装包（官网）：https://git-for-windows.github.io/
git基础配置：

//用户名
git config --global user.name "名字"
//邮箱
config --global user.email "邮箱名"
//其他配置
//让Git忽略window/Unix换行符转换的事
git config --global core.autocrlf false
//配置“kdiff3”——要是没装就忽略下面这一行
git config --global merge.tool "kdiff3"

//编码配置
//避免git gui中的中文乱码
git config --global gui.encoding utf-8
//避免git status显示的中文文件名乱码
git config --global core.quotepath off

还需在window上配置：git config --global core.ignorecase false

常用git命令：

git add .                //把所有改动文件都“添加”上
git checkout xxx         //撤回xxx文件的修改（回到以前的状态）&& 切换分支
git cimmit -m "xxx"      //提交记录（把本地的代码提交到本地的git仓库）
git remote add origin 生成的含ssh/https的仓库地址       //从本地连接远程仓库（此步骤都是放在上面commit之后执行）
git push origin master   //推送到服务端(第一次push前需要先pull)
git pull origin master   //从服务端下载一些功能
git branch               //查看分支
git branch xxx           //创建分支
git branch -d xxx        //删除分支
git checkout -b xxx      //创建新的分支并立即切换过去
git checkout -- xxx      //恢复删除（git rm）的文件
git merge xxx            //合并分支（把当前分支的代码合并到xxx分支上）
git status               //查看状态
git diff (xxx)           //查看修改内容

git reflog               //查看命令历史

比如 git status -s 后如下图：

git&webpack常用命令和配置解读_服务端

【AM】状态意为：此文件在我们将它添加到缓存后又有改动。

webpack —— 项目编译打包工具

其模式有两种：

development
production —— 压缩过的

使用第二种方式，在output的filename中要加“[contenthash]”：

output:[
	filename:'bundle.[contenthash].js',
	path:path.join(__dirname,'dist')
	             //当前（大）目录
]

新建、安装webpack目录

mkdir webpack_demo
cd webpack_demo
npm install -g webpack
npm n init
npm install --save-dev webpack
webpack -v   //(查看版本)

webpack.config.js基本结构：

module.exports={
	entry:{},      //入口文件——entry:'目标文件名'——一般形式：path.join(__dirname,'文件名')
	output:{},     //出口文件——{path:path.resolve(__dirname,'dist') , filename:'导出文件名'}
	module:{rules:[]},     //模块——vue-loader&css&js&图片的解析就在这里（rules数组里面有多个配置项）
	plugins:[],    //插件配置
	devServer:{},
	externals:{}   //打包优化配置——
}

主要说说devServer —— 服务项，需要用到webpack-dev-server：

npm install webpack-dev-server --save-dev

devServer:{
	//设置基本目录结构
	contentBase:path.resolve(__dirname,'dist'),
	host:'服务器IP地址/localhost',
	//服务端压缩是否开启
	compress:true,
	port:配置服务端口号   //不建议用80：容易被占用
}

还有output，此选项里面有一个选项publicPath，非常有用——确定线上资源路径：

output:{
	path:'',
	filename:'',
	publicPath:'https://cdn.com/'
}

这样，比如需要的资源js/xxx.js就变成了https://cdn.com/js/xxx.js，就符合线上需要了。

还有就是这个externals了，这也是打包优化时需要注意的一步——删除依赖：

// import Vue from 'vue'
// import VueRouter from 'vue-router'

然后在webpack配置文件中加入如：

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex'
  }

以上几个就是此选项的基本配置项了。。。

webpack如何配置vue-loader

一般我们会新建文件vue-loader.config.js：

module.exports=(isDev)=>{
	return {
		preserveWhitepace:true,   //打包时去掉template中的空格（防止对样式有影响）
		//...
		cssModules:{}   //css文件处理（主要是对文件名和类命名）
	}
}

然后在配置文件webpack.config.js里引入：

const createVueLoaderOptions=require('./vue-loader.config.js')

const isDev=process.env.NODE_ENV === 'development'

//在config对象的module中的rules选项里增加：
{
	test:/\.vue$/,
	loader:'vue-loader',
	options:createVueLoaderOptions(isDev)
}

webpack配置加载css

引入插件：

npm install css-loader style-loader extract-text-webpack-plugin --save-dev

然后在webpack.config.js里增加如下：

const ExtractTextPlugin=require('extract-text-webpack-plugin');

//path对象中
const plugin=new ExtractTextPlugin({
	filename:'[name].css',
	ignoreOrder:true       //禁用顺序检查（这对css模块很重要！）
});

	//path中的module中的rules数组中
	{
		test:/\.css$/,
		exclude:/node_modules/,
		use:plugin.extract({
			use:{
				loader:'css-loader',
				options:{
					modules:true
				}
			}
			fallback:'style-loader'
		});
	}

webpack配置加载图片

两种方式：

file-loader：hash计算文件名npm install file-loader --save-dev

module.exports={
	//...
	module:{
		rules:[
			{
				test:/\.(png|jpg|gif|jpeg|svg)$/,
				use:['file-loader']
			}
		]
	}
}

url-loader：base64编码格式（小图片资源适用）npm install file-loader url-loader --save-dev

module.exports={
	//...
	module:{
		rules:[
			{
				test:/\.(png|jpg|gif|jpeg)/,
				use:[{
					loader:'url-loader',
					options:{
						limit:1024*30,
						fallback:'file-loader'
					}
				}]
			}
		]
	}
}

或者我们可以直接在module中的loaders选项中配置：

module.exports={
	//...
	module:{
		loaders:[
			{
				test:/\.(png|jpg|gif|jpeg|svg)/,
				loader:'url-loader?limit=1024*10'
			},
			//...
		]
	}
}

对JS的处理

用到babel插件，最主要的还是其中的latest插件：

npm install --save-dev babel-loader babel-core

npm install --save-dev babel-preset-latest

做完上面两步，我们就可以在webpack.config.js文件里这样写：

var path=require('path');
module.exports={
	//...
	module:{
		loaders:[
			{
				test:/\.js$/,
				loader:'babel',
				include:path.resolve(__dirname,'src'),
				exclude:path.resolve(__dirname,'node_modules'),
				query:{
					presets:['latest']
				}
			}
		]
	}
}

又或者，可以直接在package.json配置文件里加入：

"babel":{
	"presets":["latest"]
}