webpack-dev-server
webpack-dev-server作用
我们在修改了项目代码以后需要不断的重新执行webpack命令，重新打包然后回到浏览器去刷新页面，这种开发效率很低下，所以说为了省去这部分没必要的操作，因而我们在这里要使用webpack-dev-server来实现当代码更新时项目的自动打包发布，刷新浏览器页面的操作。
这一篇文章是在上一篇文章源码的基础上写出来的，所以说在源码部分可以参考上一篇文章。
添加webpack-dev-server
webpack-dev-server需要的依赖为webpack-dev-server和html-webpack-plugin，其中webpack-dev-server又依赖于webpack，因而我们要在package.json中添加这三个依赖项。
修改源码
site.css源码：
在site.css中添加如下代码，该代码的意识是添加背景图片，而该图片的大小大于20KB。这样图片就不会以base64位的形式加载到build.js中，而会以图片路径的形式进行加载
#bg1{
width:450px;
height:675px;
background-image: url("../imgs/jpg/girl.jpg");
}
index.html源码：
在其中添加如下代码用来展示图片：
<div id="bg1"></div>
同时删除如下代码，因为此时项目的页面资源路径将会以热加载的形式加载资源链接。
<script src="dist/build.js"></script>
package.json源码：
这里需要在文件的scripts关键字下添加如下指令，用于启动webpack-dev-server服务器。
"dev": "webpack-dev-server --inline --hot --open --port 4009"
参数说明：
--inline:自动刷新
--hot:热加载
--port:指定端口号为5200
--open:自动在默认浏览器中打开
--host:可以指定服务器的ip,不指定默认为127.0.0.1(localhost)
同时在控制台中，将光标定位于项目根目录中，执行下述指令将webpack、webpack-dev-server、html-webpack-plugin打包到package.json文件中。
cnpm i webpack webpack-dev-server html-webpack-plugin --save-dev
现在由于这里变动不少，而且一直没有上一个完整的源码，所以说现在上的完整源码如下：
{
"name": "csspackage",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 4009"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.1",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^0.5.8",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.0"
}
}
webpack.config.js源码：
在源码中添加html-webpack-plugin依赖的引用，如下：
var htmlwp = require('html-webpack-plugin');
同时添加如下代码：
,plugins:[
new htmlwp({
title:'首页' //生成的页面标题
,filename:'index.html' //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，
,template:'index.html' //根据index.html这个模版来生成（这个文件请程序员自己生成）
})
]
为了方便起见，完整源码为：
var htmlwp = require('html-webpack-plugin');
module.exports = {
entry:'./src/main' //指定打包的入口文件
,output:{
path:__dirname + '/dist'
,filename:'build.js'
}
,module:{
loaders:[
{
test:/\.css$/
,loader:'style-loader!css-loader'
}
,{
test:/\.scss$/
,loader:'style-loader!css-loader!sass-loader'
}
,{
test:/\.less/ //打包.less文件
,loader:'style-loader!css-loader!sass-loader!less-loader'
}
,{
test:/\.(png|jpg|gif|ttf)$/ //打包url请求的资源文件
,loader:'url-loader?limit=20000' //limit表示图片的大小为40k是临界值，小于20k的图片均被
// 打包到build.js中去，此时图片的显示就会很快，这是一个优化操作。
}
]
}
,plugins:[
new htmlwp({
title:'首页' //生成的页面标题
,filename:'index.html' //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，
,template:'index.html' //根据index.html这个模版来生成（这个文件请程序员自己生成）
})
]
};
运行结果
在控制台中执行下述指令
cnpm i
webpack
npm run dev
然后再浏览器中访问dist/index.html，其访问结果如下：
在上面，我们明显可以看到，我们所加载的图片已经展示出来了，当然在这里，其实我们只需要下面这个指令就行了：
npm run dev
此时在控制台中就会显示出来我们的网页访问路径：
通过访问上图路径，我们可以看到和之前一样的界面展示效果。
与之前不同之处在于，前面的页面展示其实是因为webpack指令将页面打入了dist/index.html中，此处的页面在修改代码后要想实现刷新，得重新执行一次webpack指令。
而图示中的http://localhost:4009/路径则是属于热加载的网页路径，此处的路径在修改代码时页面可以实现热加载效果。