[TOC]
# 1.打开VSCode,按下``` ctrl+` ```打开命令行,输入以下命令进行安装
```
1.npm init -y
2.npm i webpack webpack-cli -g
注意:全局安装只需安装一次,以后再写项目无需输入此命令
3.npm i webpack webpack-cli --save-dev
```
安装完成后,将会出现以下图片中的文件
![](https://box.kancloud.cn/a95d4cdde858af09307629688ae87a35_255x65.png)
## 1.1打包的方式
* 直接在命令行中输入``` webpack ```
* 先在```package.json```文件```"scripts"```对象中添加一行代码
```
"build":"webpack",
```
如图所示:![](https://box.kancloud.cn/ab71c7dd8fbe993772639f242d40febb_478x155.png)
再到命令行中输入```npm run build```进行打包
# 2.创建一个webpack.config.js文件
## 初始
```
const path = require('path');
module.exports={
entry:"./src/index.js",
//打包源文件
output:{
//打包后的文件
filename:"bundle.js",
//文件名称
path:path.resolve(__dirname,'dist')
//文件地址
保存为根目录下的dist![文件](https://box.kancloud.cn/0229e57762e32f3167141dbf13f5c14f_1545x104.png)夹中的bundle.js文件
}
}
```
输入命令```webpack```打包后,产生dist文件夹
## mode
命令行有警告
![](https://box.kancloud.cn/0229e57762e32f3167141dbf13f5c14f_1545x104.png)
在entry同级处添加一行代码
```
mode:"development",
```