git&webpack常用命令、配置解读

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

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

常用git命令：

git add .                //把所有改动文件都“添加”上
git checkout xxx         //撤回xxx文件的修改（回到以前的状态）&& 切换分支
git cimmit -m "xxx"      //提交记录
git push origin master   //推送到服务端
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 后如下图：

【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:'目标文件名'
	output:{},     //出口文件——path:path.resolve(__dirname,'dist')&filename:'导出文件名'
	module:{},     //模块——css&js&图片的解析就在这里
	plugins:[],    //插件配置
	devServer:{}
}

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

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

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

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

---

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配置加载图片

两种方式：

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

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

2. 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'
			},
			//...
		]
	}
}