webpack-dev-server配置指南（使用webpack3.0）

最近正在研究webpack，据说webpack能够本身搭建一个小型的服务器（使用过vue-cli的朋友应该都见识到过），因此火烧眉毛的想要尝试一下。不过，在实际操做中发现，用webpack搭建服务器仍有很多坑，一方面是因为本身对文档的不熟悉，不了解webpack-dev-server的运做模式；另外一方面，在翻阅了很多博客和文章后，发现很多配置实际上都跑不起来（有多是版本的缘由，也有多是我本身配置的缘由）。因此我打算用webpack3.0把dev-server跑起来给你们演示一遍，顺便把一些配置和原理给你们讲清楚，这样就省的绕弯路了。

　　

这里我就默认你们都已经安装了webpack以及本身须要使用的loader和plugins，因为webpack-dev-server是个独立的npm包，因此咱们须要在npm下安装它：　

npm install webpack-dev-server --save-dev

 

以后咱们就能够在webpack.config.js中进行配置：

const path = require("path");
module.exports = {
     entyr:{
           .......  //设置入口文件
     },
     output:{
           .......  //设置出口文件
     },
     module:{
           .......  //配置loader，注意使用rules而不是loaders
     },
     plugins:[
           .......  //注意是数组
     ],
     devServer:{
           //咱们在这里对webpack-dev-server进行配置
     }                
}

devServer中经常使用的配置对象属性以下：

1. contentBase："./" // 本地服务器在哪一个目录搭建页面，通常咱们在当前目录便可；

2. historyApiFallback：true // 当咱们搭建spa应用时很是有用，它使用的是HTML5 History Api，任意的跳转或404响应能够指向 index.html 页面；

3. inline：true // 用来支持dev-server自动刷新的配置，webpack有两种模式支持自动刷新，一种是iframe模式，一种是inline模式；使用iframe模式是不须要在devServer进行配置的，只需使用特定的URL格式访问便可；不过咱们通常仍是经常使用inline模式，在devServer中对inline设置为true后，当咱们启动webpack-dev-server时仍要须要配置inline才能生效，这一点咱们以后再说；

4. hot：true // 启动webpack热模块替换特性，这里也是坑最多的地方，很多博客都将hot设置了true，咱们姑且也设置为true，以后再看；

5. port：端口号(默认8080) // 这就不用我多说了吧；

事实上大概经常使用的配置也就这样，为了方便，咱们在packjson中对webpack-dev-server的的启动进行一下设置：

"scripts": {
    ......
    ......
    "start":"webpack-dev-server --inline"
  },

别忘了在devServer中设置inline：true后这里也要设置一下！

这时咱们打包后再运行服务器后应该发现index.html页面已经展现了，打包好后的js文件虽然出如今了src上，但并无显示，打开控制台会发现以下报错：

控制台显示：Hot Module Replacement is disabled；

奇怪？咱们以前不是在devServer中设置了hot为true了吗？事实上，虽然不知道为何，可是目前来讲hot这个属性已经没有用了，使用热模块的话咱们须要用到一个叫webpack.HotModuleReplacementPlugin的插件。因此咱们的webpack.config.js须要加上这些：

const path = require("path");
const webpack = requier ("webpack");

module.exports = {
     entyr:{
           .......  //设置入口文件
     },
     output:{
           .......  //设置出口文件
     },
     module:{
           .......  //配置loader，注意使用rules而不是loaders
     },
     plugins:[
          new webpack.HotModuleReplacementPlugin()
           .......  //注意是数组
     ],
     devServer:{
          contentBase: "./", 
      historyApiFallback:true,
      inline:true,
      hot:true
     }                
}

 这时咱们再在bash上运行npm run start后发现服务器就搭建完成了！

 

另外，还有一点值得注意的就是，webpack-dev-server所使用的bundle.js文件并非webpack.config.js中output打包生成的bundle.js，而是使用webpack-dev-server本身打包生成的，这个文件不存在与output或其余路径中，而是存到了内存中，事实上webpack-dev-server所使用的那个bundle.js咱们是看不到的！