转载自: https://www.jianshu.com/p/6712e4e4b8fe
1. npm install webpack webpack-cli webpack-dev-server -g
2. 终端 CD到项目文件夹 npm install webpack webpack-dev-server webpack-cli -D (在项目本地也安装一次)
3. mkdir config dist src创建三个文件夹
文件夹如下所示:
4. npm init -y 成功后会多了一个package.json这个文件
5. 手动在dist下创建index.html文件
手动在src下创建index.js文件
项目目录如下:
6. webpack4.x中打包默认找src/index.js作为默认入口,
可以直接在终端中输入命令webpack 将当前的内容进行一个简单的打包
在终端输入webpack
这时候看下你的项目目录dist文件下是不是多了一个main.js文件
7. 细心的小伙伴应该看到打包的时候终端中会出现黄色的警告提示
mode是webpack中独有的,有两种打包环境
一个是开发环境:development
另外一个是生产环境:production
打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了
下面是输入webpack --mode=development的样子
下面是webapck --mode=production命令打包,这个是代码压缩过的,细心的朋友应该也发现打包后小了很多
同时项目文件夹下面多了 一个node_modules文件夹
8. 手动在config下创建webpack.dev.js文件
现在目录如下:
9. 手动删除dist里的main.js
手动删除src里的index.js
现在目录如下:
10. 手动在src文件夹下面创建main.js文件
现在目录如下:
11. 进入到webpack.dev.js文件中进行配置,具体在代码中注释(这里是简单的,具体的下面)
12. 现在不能执行之前的webpack --mode="development"命令了会报下面的错误
这里是因为webpack4打包默认找的src下面的index.js入口,我们前面已经删除了,这里src下面死main.js文件,所以找不到就报ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'错误,所以这里我们到packsge.json里面配置下命令,让打包的时候执行我们在config/webpack.dev.js下面配置的入口。
这个时候我们在终端执行输入命令 npm run build就可以了
13. 现在配置打包时候的入口文件以及出口文件,很多朋友应该也看到webpack.dev.js中的注释的,这里的入口是 './src/main.js'
//入口文件的配置项
entry:{
//里面的main是可以随便写的
main:'./src/main.js'
}
这个时候我们有两个文件入口这么办呢?现在我们再src文件夹下面创建main2.js
//入口文件的配置项
entry:{
//里面的main是可以随便写的
main:'./src/main.js',
main:'./src/main2.js' //这里新添加一个入口文件
},
这个时候我们再使用之前配置的命令
npm run build
进行打包![](https://i-blog.csdnimg.cn/blog_migrate/a3dc0d8c8df0e212d56c869a3388a023.png)
我们会发现报错提示 Conflict: Multiple assets emit to the same filename bundle.js 翻译过来告诉我们 冲突:多个资产发出相同的文件名bundle.js。这个时候就需要我们来配置出口文件了,下面是之前的出口文件
![](https://i-blog.csdnimg.cn/blog_migrate/6b8b1be343c854121cf9054bb1ae5ca7.png)
现在我们将原来写死的bundle.js给改成了 [name].js
注:[name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件。
![](https://i-blog.csdnimg.cn/blog_migrate/64ca20023707223a633cb6c1660cfbb7.png)
这个时候我们再执行打包命令看下
![](https://i-blog.csdnimg.cn/blog_migrate/682ca24842cda1804ba5461d0e401f24.png)
已经打包好了,这个时候看下出口文件dist下面也打包生成了两个相同入口名字的文件
![](https://i-blog.csdnimg.cn/blog_migrate/8b2cd9e39c256afc886b88cfd1050b71.png)
14. 设置webpack-dev-server,刚开始的时候我们就全局下载这里就不需要下载了,现在需要配置一下devServer。最简单的devServer配置项只有四个
![](https://i-blog.csdnimg.cn/blog_migrate/c6ac0adacf50e7e0ceac4a707ba9500d.png)
这个时候直接执行命令webpack-dev-server会报错
![](https://i-blog.csdnimg.cn/blog_migrate/03dcbf0835866f6ebbcb66f38ff77673.png)
这个时候我们可以到packsge.json里面配置下
![](https://i-blog.csdnimg.cn/blog_migrate/04f64e60665cc3c28d656255ebc2d731.png)
这个时候我们终端输入命令
npm run server
就可以跑起来了![](https://i-blog.csdnimg.cn/blog_migrate/0216b43482e921d2d1bb356d5ae390a8.png)
然后我们再到项目dist文件夹下面的index.html 文件中引入打包的两个js
![](https://i-blog.csdnimg.cn/blog_migrate/ceb2b1fba9847f31e78ca2e8a95c3fec.png)
保存后再到src文件下面分别给main.js和main2.js文件里面写一些东西。
在
src/main.js
文件下加:
alert("11111")
在
src/main2.js