### 使用yarn 安装 webpack
1. yarn的使用：
yarn add   安装  

yarn global add 全局安装

yarn add 软件包名+@版本号  指定版本安装

yarn remove +xxx  移除

yarn init 初始化

yarn upgrade +xxx 升级

所以，yarn 安装webpack 需要运行：yarn global add webpack

2.webpack使用：
用yarn 安装好后  终端运行 webpack 会报错（webpack命令找不到） 

注，使用npm install webpack -g  也就是使用npm全局安装webpack时不会报错。 是因为，安装node 时，会自动把npm的环境变量加入系统变量中 

window系统 运行 yarn global bin 查看yarn 的全局目录 然后从我的电脑加入 环境变量

linux 系统  运行 yarn global bin 查看 yarn 的全局目录，然后 #export PATH=$path:+路径

这样webpack就可以 全局运行了


### webpack使用
>不包含webpackcli  单独使用webpack

1.webpack 目录：

```

  /webpackeg
	/dist
		bundle.js 	//打包后生成的js文件
		index.html	 //package.json中定义的入口文件
	/node_moudels  //yarn 安装的 各种插件
	/src
		index.js 要压缩的js文件
	package.json 应用的默认配置
	webpack.config.js

```

2.package.json 内容


```

{
  "name": "ceshi",
  "version": "1.0.0",
  "description": "wu",
  "main": "index.js",
==  "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "build": "webpack --mode production",
          "dev": "webpack --mode development"
         },==
  "author": "aaa",
  "license": "3000",
  "private": false

}

```

webpack.config.js 内容：

```

const path = require('path');
module.exports = {
    // 入口js路径
    entry: './src/index.js',
    // 编译输出的js及路径
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};


```

3.运行项目
在当前目录打开终端，输入 yarn run build 


### webpack热更新

1.安装 webpack-dev-server 

yarn global add webpack-dev-server

2.在最外层目录新建  webpack.dev.js

输入配置信息：

```

const path=require("path")
moudle.export={
	entry:"" //入口文件路径
	output:{
		path:"" 压缩后文件所在路径,
		filename:"" 文件名
	}
	
}

```

3.更改 package.json


script ->dev 改成
 "dev": "webpack-dev-server --config webpack.dev.js --open"

4.终端运行 yarn run dev