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 即可看到效果，修改文件，实现浏览器自动刷新。

本测试项目 在这里下载