今天想了解一下webpack，但找了网上的一系列教程，都会或多或少出现一些不明报错，实在恼火，经过几番简化，终于用最简单的方法使用了webpack，在此记录一下

## 一. 环境配置

1.首先，安装Node.js，这里不赘述，未接触nmp的童鞋可以参考Node.js安装配置

2.在cmd中输入

```
npm install webpack -g
```

3.在自己测试的位置创建一个新的文件夹，命名webpack_demo



![](https://qiniu.lgx123.cn/20200104135037-1.png)

4.进入刚刚所创建的文件夹webpack_demo，按住shift键同时点击鼠标右键(即打开cmd并进入webpack_demo文件夹)



![](https://qiniu.lgx123.cn/20200104135055-1.png)

5.在打开的命令窗口键入：npm init，根据提示填写信息，name表示项目名，version表示版本等等，不一一赘述了，也可使用默认值，一路回车即可，最后出现“is this ok?”时，敲击回车键，webpack_demo文件夹便生成了package.json文件夹



![](https://qiniu.lgx123.cn/20200104135115-1.png)

## 二. 构建webpack项目

1. 安装webpack

    ```shell
    依次执行如下命令：
    1.npm install -g webpack; //全局安装webpack
    2.npm install webpack --save-dev; //安装关联到项目目录
    3.npm install webpack-cli -g; //此工具用于在命令行中运行 webpack
    4.npm install webpack webpack-cli --save-dev;
    ```

2. 在webpack_demo文件夹下创建webpack.config.js文件，此文件为webpack的配置文件。具体内容如下：

```
//webpack.config.js
module.exports={
	entry:'./src/js/entry.js', //页面入口文件
	//输出文件
	output:{
		filename:'index.js',	//输出文件名
		path:__dirname+'/out',	//输出文件路径
	}
}
```


参数简单说明：

- entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）

- output：对应输出项配置 
  - ​	path ：入口文件最终要输出到哪里，
  - ​	filename：输出文件的名称
  - ​	publicPath：公共资源路径

3.devServer 构建本地服务器：让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。

```sh
npm install webpack-dev-server --save-dev
```

配置服务器：

服务器配置可以在 webpack.config.js 中配置

```shell
module.exports = {
	……
	//devServer 构建本地服务器
	devServer: {
		contentBase:'./public',  // 不设置会以根目录作为服务器目录
		historyApiFallback:true, //不跳转
		inline:true,//实时刷新
		hot:true //热更新
		port: 8080	//默认端口，不设置则用8080
	},
}
```

运行并自动打开浏览器

在 package.json 文件 的 scripts 中进行配置：

```json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open Chrome.exe",
  }
```

注意：webpack-dev-server 与 webpack 存在版本冲突，单纯使用 webpack-dev-server 命令会报错

执行 npm run start 即可在浏览器中打开

4.接着，我们在创建一些基本的文件保存路径，我们这里创建网页中最基本的一些文件夹



![](https://qiniu.lgx123.cn/20200104135326-1.png)



![](https://qiniu.lgx123.cn/20200104135341-1.png)

3.接下来我们在index.html，和entry.js中填充点内容

```

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
</head>
<body>
<div>hello world</div>
<script type="text/javascript" src="./out/index.js"></script>
</body>
</html>
```

```
// entry.js
document.write('呵呵到天亮');
```


4.完成以上操作，我们可以来试试效果了，在刚才所打开的cmd窗口中输入webpack （假如已经关闭，按上面第4步操作即可）

下面WARNING in configuration原因及解决办法可点击链接：[https://blog.csdn.net/lgx1134569285/article/details/87986317](https://blog.csdn.net/lgx1134569285/article/details/87986317)



![](https://qiniu.lgx123.cn/20200104135431-1.png)

5.看到上面 的一幕，恭喜你，已经成功了，我们再进一步验证一下，



![](https://qiniu.lgx123.cn/20200104135552-1.png)

目录下多了一个out文件夹，out文件生成了我们所命名的index.js



![](https://qiniu.lgx123.cn/20200104135604-1.png)

打开内容如下



![](https://qiniu.lgx123.cn/20200104135615-1.png)

打开index.html文件，结果不仅打印出html文件中的"hello world"，js中的打印123也生效了

(ps：这里打印中文时假如出现乱码，记得在html文件的<head>标签添加编码<meta charset="utf-8">)



![](https://qiniu.lgx123.cn/20200104135627-1.png)

webpack笔记

### 设置用户名、密码

```
git config --global user.name "Your Name"
git config --global user.email "email@example.com"

git remote  //查看远程库信息
git remote -v显示更详细的信息
```

### 提交文件

```
git add readme.txt
git commit -m "message"
```

### 查看状态

```
 git status  告诉你有文件被修改过
 git diff   可以查看修改内容。
 git diff HEAD -- readme.txt 查看工作区与版本库最新版的区别
 git log   命令显示从最近到最远的提交日志，
 git log --pretty=oneline  一行显示

```

### 版本回退

```
git reset --hard HEAD^   //回退到上一版本
git reset --hard commit_id   //回退到指定版本
```

### 撤销修改

```
git checkout -- file  //丢弃工作区修改
git reset HEAD <file>  //缓存区回退到工作去
如果修改已经提交到版本区，使用版本回退
```

### 删除

```
a.rm test.txt  //删除本地工作去文件   （误删可用git checkout --test.txt把误删的文件恢复到最新版本)
b.git rm test.txt //删除版本库文件
d.git commit -m <message>
```

### 上传到github 

```
1.生成ssh key:  $ ssh-keygen -t rsa -C "youremail@example.com"

2.git remote add origin git@github.com:michaelliao/learngit.git   要关联一个远程库

3.$ git push -u origin master  本地库的所有内容推送到远程库上：由于远程库是空的，我们第一次推送master分支时，加上了-u参数
git push origin master推送最新修改
```

### 从远程库克隆

```
 git clone git@github.com:lingengxiong/testAgain.git

（还可以用https://github.com/michaelliao/gitskills.git这样的地址。实际上，Git支持多种协议，默认的git://使用ssh，但也可以使用https等其他协议。）
```





# 分支管理

### 查看分支：

```
git branch
```

### 创建分支：

```
git branch <name>
```

### 切换分支：

```
git checkout <name>
```

### 创建+切换分支：

```
git checkout -b <name>
```

### 合并某分支到当前分支：

```
git merge <name>
```

### 删除分支：

```
git branch -d <name>
git branch -D <name>  //强行删除未合并的分支
```

### 查看分支合并情况

```
git log --graph --pretty=oneline --abbrev-commit
```





### 分支管理策略

```
git merge --no-ff -m "merge with no-ff" dev              --no-ff参数，表示禁用Fast forward
```



### 保存工作现场

```
git stash
```

### 查看现场保存情况

```
git stash list
```

### 回复现场

```
git stash pop
git stash apply stash@{0} 多次stash,恢复时，指定stash
```

### 创建远程origin的dev分支到本地

```
git checkout -b dev origin/dev
```

### 指定本地`dev`分支与远程`origin/dev`分支的链接 

```
git branch --set-upstream-to=origin/dev dev
```

### 多人协作

```
因此，多人协作的工作模式通常是这样：

首先，可以试图用git push origin <branch-name>推送自己的修改；

如果推送失败，则因为远程分支比你的本地更新，需要先用git pull试图合并；

如果合并有冲突，则解决冲突，并在本地提交；

没有冲突或者解决掉冲突后，再用git push origin <branch-name>推送就能成功！

如果git pull提示no tracking information，则说明本地分支和远程分支的链接关系没有创建，用命令git branch --set-upstream-to <branch-name> origin/<branch-name>。
```







# 标签管理

### 创建标签

```
git tag <name>  //如git tag v1.0

```

### 查看标签

```
git tag
```

### 补打标签

```
git log --pretty=oneline --abbrev-commit  //查看历史提交的commit id
git tag v0.9 f52c633

git tag -a v0.1 -m "version 0.1 released" 1094adb  //创建带有说明的标签，用-a指定标签名，-m指定说明文字
git show <tagname>可以看到说明文字
```

### 删除标签

```
git tag -d v0.1

git push origin :refs/tags/v0.9  //从远程删除
```

### 推送标签

```
git push origin <tagname>

git push origin --tags  //一次性推送全部尚未推送到远程的本地标签
```

