web-dev-server 配置基础总结

一、什么是web-dev-server

        1.基于nodejs的使用了express的http服务器。能够实现页面的热加载、热替换。

       2.这个 Http服务器 和 client 使用了 websocket 通讯协议。原始文件（测到入口文件以及依赖的变化）作出改动后， 会自动编译， 并实时更新。

        3.对于编译并打包的的文件,并没有存储在output.path的路径中，而是存在了内存中。  也就是说在webpack-dev-server中path路径不起作用。

    4. 设置output.publicPath。此路径时公共路径。是资源的引用路径。在index。html中引用文件时，   就是引用此虚拟内存中的路径。引用文件的路径为publiPath+filename。

  此时在配置 output.publicPath时，/指的是根目录。此时是搭载在服务器上，根目录是运行webpack-ser-dever的目录。

   如：output.publicPath：“/dist“

   5.如文件中打包了图片。css。js中引用的图片的路径不会有问题。因为js、css 文件都是在虚拟内存中。

二、如何安装

     安装webpack -dev-server。

三、参数配置

在wbpack.config.js中配置如下：

 devServer:{
        contentBase: "./",            //本地服务器的搭建目录，默认为当前目录       
        historyApiFallback:true,      //启动\(^o^)/~
        inline:true,                  //实现自动刷新（必须在命令行输入--inline）
        progress:true,                //显示打包进程（必须在命令行输入--hot）
        hot:true,                     //实现热加载         
        port:8080                     //设置端口
       congress：true                  //  支持压缩
  }

四、运行：

 一定要输入模式：--mode development/production

    在命令行输入命令：

"webpack-dev-server   --open  --hot --inline   --mode development"

 参数意思如下：

--open：                       //打开默认浏器，index.html
--config  webpack.config.js     //运行webpack。cofig.js文件
--hot：                        //实现热替换
--inline:                      //实现自更新
--quiet                       //  控制台中不输出打包的信息
--compress                      //开启gzip压缩
--progress                    //显示打包的进度
--colors:                    //进度用颜色表示

五、关于index.html中的文件的引入

      根据webpack.config.js中的output中publicPath的配置有所不同。

  1.若publicPath有值，则引入的打包文件的目录为 publicPath+filename。无论inde.html处于那个目录下引 入文件的目录都是相同的。（因为都是从根目录下引入的）

webpack.config.js中的配置

output: {

    filename: "bundle.js",
    publicPath:/dist/
    path:path.resolve(__dirname,"dist")
  }

index.html的引入文件

<script type="text/javascript" src="/dist/bundle.js"></script></body>

2.若publicPath没有设置（默认值为当前目录，即根目录），则引入的打包文件的目录为 filename。无论inde.html处于那个目录下。引入文件的目录都是相同的。（因为都是从根目录下引入的）

webpack.config.js中的配置

output: {
    filename: "bundle.js",
    path:path.resolve(__dirname,"dist")            //没有用
  },
index.html的引入文件

<script type="text/javascript" src="bundle.js"></script></body>