webpack-dev-server

 

原文出自 https://www.cnblogs.com/penghuwan/p/6941616.html
用最简单的方式搭建一个服务器
npm install webpack-dev-server --save-dev，

默认是localhost:8080端口，若是bundle.js找不到？

var webpack = require('webpack')
var path =require('path')
module.exports = {
  entry:{
     app:path.join(__dirname,'src','index.js')
  },
  output:{
     filename:'bundle.js',
     path:path.join(__dirname,'dist')
  }，
  devServer: {
       contentBase: path.join(__dirname, "dist")
   }
}

详解webpack-dev-server的配置属性 

contentBase：它指定了服务器资源的根目录，若是不写入contentBase的值，那么contentBase默认是项目的目录。

　　产生错误：由于bundle.js被 "放在了"咱们的项目根目录里，在dist/html里<script src="./bundle.js"></script>此时显然不能根据路径找到bundle.js

　　解决错误：经过配置contentBase: path.join(__dirname, "dist")将bundle.js "放在了"dist目录下，此时bundle.js和dist/index.html位于同一目录下，经过 src="./bundle.js"天然就找到bundle.js了

webpack打包和webpack-dev-server开启服务的区别——

webpack输出真实的文件，而webpack-dev-server输出的文件只存在于内存中,不输出真实的文件！

webpack:当咱们在终端运行"webpack"后：

当咱们在终端运行"node_modules/.bin/webpack-dev-server后

2. port配置属性指定了开启服务的端口号：

devServer: {
   port:7000
}

3.host设置的是服务器的主机号：

devServer: {
   contentBase: path.join(__dirname, "dist"),
   port:7000,
   host:'0.0.0.0'
}

此时访问 0.0.0.0:7000就能够访问项目了

4.historyApiFallback，这个配置属性是用来应对返回404页面时定向到特定页面用的

增长一个访问错误的404页面

historyApiFallback:{
    rewrites:[
        {from:/./,to:'/404.html'}
    ]
}    

5.overlay 这个配置属性用来在编译出错的时候，在浏览器页面上显示错误，默认是false，可设置为true

6.stats   这个配置属性用来控制编译的时候shell上的输出内容 , stats: "errors-only"表示只打印错误： 

7.quiet  当这个配置属性和devServer.stats属于同一类型的配置属性  ，当它被设置为true的时候，控制台只输出第一次编译的信息，当你保存后再次编译的时候不会输出任何内容，包括错误和警告

8.compress  这是一个布尔型的值，当它被设置为true的时候对全部的服务器资源采用gzip压缩

采用gzip压缩的优势和缺点：

优势：对JS，CSS资源的压缩率很高，能够极大得提升文件传输的速率，从而提高web性能

缺点：服务端要对文件进行压缩，而客户端要进行解压，增长了两边的负载

9.devServer.hot和devServer.inline

在这以前，首先要说一下的是webpack-dev-server的自动刷新和模块热替换机制

webpack-dev-server有两种模式能够实现自动刷新和模块热替换机制

1. Iframe mode (默认,无需配置)

页面被嵌入在一个iframe里面，而且在模块变化的时候重载页面

2.inline mode（需配置）添加到bundle.js中

当刷新页面的时候，一个小型的客户端被添加到webpack.config.js的入口文件中

inline mode模式的刷新

1在配置中写入devServer.hot：true和devServer.inline：true

2增长一个插件配置webpack.HotModuleReplacementPlugin()

var webpack = require('webpack')
module.exports = {
/*省略entry ,output等内容*/
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        inline:true,
        hot:true
    }
}        

　　

如今还有一个问题，那就是每次直接输入node_modules/.bin/webpack-dev-server来启动服务器对咱们来讲简直就是莫大的痛苦，那么怎么对这一过程进行简化呢？

答案：把运行脚本写到package.json里！

{
   "name": "webpackTest2",
   "dependencies": {},
   "devDependencies": {},
   "scripts": {
       "start": "node_modules/.bin/webpack-dev-server"
     }
}

在终端运行npm start便可运行成功!

配置服务的三种方式

1在webpack.config.js输出对象中的devServer属性中写配置（也就是咱们上述全部例子的作法）

2写在package.json中，写在node 命令对应的脚本中，例如咱们能够写成：

"scripts": {

"start": "node_modules/.bin/webpack-dev-server --port 8000 --inline true "

}

(但这显然并非一个值得推荐的方式)

3使用纯node的API实现，下面是一个官方给的例子

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
       /*咱们写入配置的地方*/
});
server.listen(8080);