从配置到放弃----Webpack

最近在学习Vue技术，期间遇到使用webpack进行项目构建，一步一步按照视频教程做，遇到了很多想弃坑的配置问题，配置期间的报错暂时不说，先记录一下刚刚成功运行的Webpack的配置，毕竟现在不记，晚上再记就来不及了。

---

一、webpack必知

前端的项目构建工具，基于nodejs，与Gulp的区别，在于gulp是针对功能点而言，也就是基于task任务，大项目的话，需要建很多小任务，而webpack则是对整个项目构建。

1. webpack诞生原因：由于网页引入静态资源过多，网页加载速度慢，很多时候都会进行二次请求，并且还有一堆的复杂依赖关系要处理。而对于过多的静态资源，采用合并、压缩、精灵图，还有图片的Base64编码可以进行优化，而对于那么多复杂的依赖关系，则需要使用requireJS、webpack技术进行解决。
2. webpack能处理JS文件之间的依赖关系，也可以处理JS兼容问题。

---

二、webpack基本使用

1、webpack的配置依赖大部分要通过npm进行安装

npm i webpack -g  进行全局的webpack安装

npm init -y   文件夹名字为全英文则使用-y进行初始化

npm i webpack -save-dev  webpack的局部安装

npm i webpack-cli -D  webpack的安装

以上需要在终端进行配置，这些都是必要的。(dist是手动创建的文件夹)

2、接着我们就要在index.html写点小东西，没有任何引入文件和样式：

 

 

3、这时候，我们在main.js编写列表的样式：

这是main.js中的内容，引入文件的方法是ES6中的，所以浏览器不会识别，这时候，我们就需要使用到webpack。

4、如果想对webpack进行操作，在根目录就要手动创建webpack.config.js文件。

entry-----代表入口，就是进行编译的时候，查找哪一个文件

output-----有两个值(path   filename)，最后输出的时候，要存放的文件，而bundle.js是main.js文件编译后的。

module-----对不同模块进行处理的规则

plugins-----要引入的插件

devserver-----编译后的服务器状态，最好是在package.json中进行配置，比较方便

5、还差最后一个步骤

在package.json中进行注册，这时候还需要进行安装webpack-dev-server，命令 npm i webpack-dev-server -D,安装完毕之后，在scripts中的test下面填写，名字可以自己随意取，我这里是取得dev，具体的参数：

webpack-dev-server 是必需的，  open----运行编译后，自动打开网页   port----访问的端口号  contentBase-----读取页面的路径   hot----无刷新更新，可以实时反馈更改的数据到浏览器页面   mode的值有两个（development、production）-----运行是在开发环境还是产品环境。

PS:在index.html中引入bundle.js文件，否则页面渲染不出效果。路径：“bundle.js”，因为webpack编译成功后，bundle.js是托管到内存中，此时访问的页面index.html就在根目录上。

此篇文章只是webpack的基本使用，知识点错误或者不全，请君反馈到评论区！！！