webpack-dev-server的使用

最近用

webpack

打包

React

项目，一开始都是在浏览器端手动刷新看效果，后来觉得太麻烦，遂将目光落在了

Webpack-dev-server

上，本以为也就是个配置而已，小case，随便在网上搜了下，结果捣鼓了小半天都没弄出什么头绪来，网上教程倒是很多，然而大多数都是语焉不详，你抄我来我抄你，最后屁用没有，最详细的就是直接翻译官网的原文，然而由于过于详细了，导致了我反复看了好几遍才弄清楚到底是怎么回事。

原理性的东西自己完全可以去 官网 看，不过大多数人可能需要一段时间才能弄明白到底说的啥，我这里的目的只是为了能够快速简单粗暴地用上

webpack-dev-server

，进入开发状态，所以就没有官网那么详细了，但保证你能看懂。

首先看测试项目的目录结构：

/.vscode

目录是我用的编辑器的配置文件，没什么关系不用管，

/compnents

是一些

react

的组件，也不用管

/build

是项目打包编译后的目录，其中

bundle.js

是

webpack

的打包文件，

index.html

是项目的主页

node_module

是项目依赖包目录

index.js

是项目的入口文件，

package.json

就不说了，

webpack.config.js

就是

webpack

的配置文件，想要使用

webpack

就靠它。

项目结构说完，下面直接看重点。

package.json

的内容

{
"name": "webpack-dev-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"remarkable": "^1.7.1"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.22.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"scripts": {
"dev": "webpack-dev-server --content-base build --inline"
},
"author": "",
"license": "ISC"
}

其中,

remarkable

是一个

markdown

转换插件不用管，可以直接忽略，重点在于

scripts

的配置项。

`--content-base build` ：此命令是在cmd命令行中执行的,它将build目录作为根目录，这里是根据项目主页所在目录得到，例如我这里主页文件`index.html`就是放在了 `/build`目录下。

--inline：加上这个配置，以命令行方式启动项目，就能实现项目文件修改立即自动重新打包编译并且刷新浏览器的效果。

然后就是

webpack.config.js

const path = require('path')

module.exports = {
entry: {
//项目的入口文件
app:["./index.js"]
},
output: {
publicPath:"/build/",
filename:"bundle.js"
},
module: {
// 这些 Loaders 都是必须的
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader',query: {presets: ['react','es2015']}},
]
}
}

恩，这样就行了，就是这么简单，当然这里只是其中一种手段，简化了很多，但没那么多七绕八绕的道道，直接打开命令行，输入

npm run dev

即可看到效果，修改文件，实现浏览器自动刷新。

本测试项目 在这里下载