手把手超详细webpack基础入门（二）

本文接上篇《手把手超详细webpack基础入门（一）》。

四、git上传时忽略node_modules文件夹

为了日后团队协作的方便，配置不必要上传的node_modules文件夹。
项目根目录命令行输入touch .gitignore，创建.gitignore文件。在文件夹显示需要设置隐藏文件的可见性。
此时.gitignore是空文件，在里面写入

.idea/
node_modules/

表示在git上传时，不上传webstorm生成的.idea文件夹下和npm所带的node_modules文件夹下的所有文件。

五、webpack-dev-server

1.介绍：除了提供模块打包功能，webpack还提供了一个基于node.js Express框架的开发服务器，它是一个静态资源web服务器，对于简单的静态页面或者仅依赖于独立服务的前端页面，都可以直接使用这个开发服务器进行开发。在开发过程中，开发服务器会监听每一个文件的变化，进行实时打包，并且可以推送通知前端页面代码发生了变化，从而可以实现页面的自动刷新。
这样的话，就不用我们每次改动一下，想要看效果时都要去npm run dev一下了。
2.安装webpack-dev-server：命令行输入npm i webpack-dev-server -save-dev。（i是install的缩写）
3.接下来我们就不是用webpack来构建了，而是用webpack-dev-server来起一个本地服务器。所以命令变为了：webpack-dev-server --config webpack.develop.config.js --devtool eval --progress --colors --hot --content-base src。这句命令中，devtool eval是报错时的快速定位，progress是用来显示合并进度，colors--hot命令行中显示颜色，--content-base 指向设置的输出目录，后面我们跟了src就是对src目录里的任何代码变化进行监听了。
4.同样，这么长的命令我们当然是写入npm的package.json文件中了。
5.此时我们再次运行npm run dev。就会发现命令行中有一句话：Project is running at http://localhost:8080/。那么现在就不需要再从webstorm打开网页了，直接在浏览器输入http://localhost:8080/。
6.因为只是实时的开发服务器，所以此时并没有生成bundle.js，而且服务器里打开的也并不是dist里的index.html，不信你把dist目录里的删了试试。此时8080端口打开的是src里的index，并且自动引用了一个隐形的打包后的类似bundle.js的文件。
7.每次写完看效果刷新浏览器是不是很烦呢，将entry变为一个数组，加入两个元素：'webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8080'。重启一下你的node服务器，好了，现在浏览器可以自动刷新啦。

上述方法为第一版本的webpack自动刷新浏览器方式，在最新的第三版本中不支持。第三版本中直接在package的scripts那里像之前的颜色、报错、进度一样，再加一个--hot --inline即可，同时端口号的修改也在这里，写入--port 3030，将启动端口号改为3030。
webpack每个版本的配置写法是不同的，所以大家在配置webpack时，如果遇到报错，输入webpack -v可查看版本号，然后去官网看一下新的语法是什么样。或者npm install webpack@版本号，安装指定版本的webpack。

***好了，手把手超详细webpack入门结束。