webpack学习（四）— webpack-dev-server
webpack提供给我们检查压缩代码的功能之外，还提供了1个服务器的插件，这就是webpack-dev-server，利用这个差价我们可以启动个web服务器并时时更新我们的修改。
下面以1个简单的例子说明，项目结构：
package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "测试webpack",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --inline --hot --config webpack.config.js"
},
"author": "zouqin",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.16.2"
}
}
webpack.config.js
var path = require("path");
module.exports = {
entry:[
'./js/app.js'
],
output: {
path: path.resolve('./', "dist"),
publicPath: "build",
filename: "bundle.js"
}
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>我是h1标签</h1>
<script src="build/bundle.js"></script>
</body>
</html>
js/app.js
document.getElementsByTagName('h1')[0].style.background='#0f0';
-------------
以上的目录文件建好之后，用 npm install 安装package.json中声明的依赖。这时候项目根目录下就会生成node_modules文件夹。
接下来，就启动webpack-dev-server。命令参见package.json下的 "scripts"项，用:
npm run dev
相当于运行了
webpack-dev-server --inline --hot --config webpack.config.js
还有另外一种方式：在项目根目录下运行：
node node_modules/.bin/webpack-dev-server
这其实说明了我们的webpack命令是来自node_modules/.bin/webpack-dev-server。我们看github webpack-dev-server官网：
本项目用的在inline模式，没有嵌在frame中。默认的端口号是8080，所以访问地址是：http://localhost:8080/index.html
webpack-dev-server是一个小型的Node.js Express服务器【1】。既然这样，很多配置是可以设置的。启动端口号可以设置的，下面这个就在8000端口启动：
webpack-dev-server --port 8000 --devtool eval --progress --colors --hot --inline
注意：
1）webpack.config.js中的output项，可以这么理解：path是打包的项目路径，用webpack -p 执行。publicPath是webpack-dev-server的路径。
2）webpack-dev-server他将打包后的存在内存中，并没有在工作区生成一个文件。打包文件用，用webpack -p 命令。
3）--hot 是热加载，也就是说，当我们改动文件后保存，浏览器已经自动刷新了我们的修改，不需要按F5，这在我们开发时很方便
4）修改index.html文件，并不会热加载。热加载相关的是入口文件，本例中的是js/app.js文件，修改这个文件，会热加载。
5) 本例没有用css，用了css，并在入口文件js/app.js中require，修改css。也会热加载。同理，如果用了HTML的插件，在入口文件中引入，也会热加载。
6）网上的好多例子，在webpack.config.js这么写：
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
多了个'webpack/hot/only-dev-server',实践下来发现去掉完全可以。
参考
【1】https://segmentfault.com/a/1190000006964335
