1.我们先创建一个空的大文件夹
![](https://img-blog.csdnimg.cn/direct/3e22409986194356b5b1f3f2610d09cc.png)
2.打开该文件夹的终端 输入npm init -y
2.1.打开该文件夹的终端
![](https://img-blog.csdnimg.cn/direct/44012b5e4cb0496a9258c31c5788fb1c.png)
2.2在该终端运行 npm init -y
![](https://img-blog.csdnimg.cn/direct/453ddb91cc5f4a1593db92355e467844.png)
3.安装webpack
3.1打开webpack网址 点击“中文文档”
![](https://img-blog.csdnimg.cn/direct/a109841c72cc4cae9a8caac574ac5716.png)
3.2点击“指南”在点击“起步”
![](https://img-blog.csdnimg.cn/direct/90110914767049abaa56e5467652915d.png)
3.3复制基本安装图片画线的代码
![](https://img-blog.csdnimg.cn/direct/15176a5c68404f11a6d6dce5bfa3241f.png)
4.在一开始的文件夹下在创建一个名为src的文件夹
![](https://img-blog.csdnimg.cn/direct/65948298cd3d48b7be8cc4ea1b231ba2.png)
5.然后再在src内创建一个名为index.js的文件
![](https://img-blog.csdnimg.cn/direct/3ff58a5086384410918c53469d1c6fbb.png)
6.打开名为packge.json的文件修改名叫scripts内属性名后的所有内容,修改为webpack
![](https://img-blog.csdnimg.cn/direct/3234174f3c1f4cbdb64f488ba7125e5b.png)
7. 然后在终端内执行npm run scripts内的属性名(该属性名可以修改)
![](https://img-blog.csdnimg.cn/direct/a2367a79fd9b48c893c7c3064693006d.png)
![](https://img-blog.csdnimg.cn/direct/746d30b80d9a4e06a81a0bd71e40dd09.png)
8.如果修改了src内 index.js的名字就不会打包成功
![](https://img-blog.csdnimg.cn/direct/b9a2af20012f49ee8e9d95568a35db49.png)
![](https://img-blog.csdnimg.cn/direct/1612ac9fb25d46b88dd91720bec5ab81.png)
![](https://img-blog.csdnimg.cn/direct/a9a4b9cbcb93475893625c90b07d7a76.png)
9.如果想打包成功那就需要在一开始的文件夹下创建一个名为webpack.config.js文件(简化打包命令)
![](https://img-blog.csdnimg.cn/direct/200b96d0867144649238aa2291c5b5d4.png)
10.在文件内书写以下内容
//导出一个配置对象
//path是nodejs内置模块 帮助处理路径、
const path = require('path')
module.exports = {//入口 ————dirname当前模块的绝对路径entry:path.resolve(__dirname,'src/index.js'),//此的地址为src内自己定义的文件名//出口output:{//目录path:path.resolve(__dirname, 'dist'),//文件名filename:'index.js',//此地址为src内自己定义的文件//清空dist 输出最新的内容clean:true,},
}
11.在一次执行 npm run scripts内的属性名(该属性名可修改)
![](https://img-blog.csdnimg.cn/direct/f44c492cc3d348d1a3a6d1205bf1cfd0.png)