webpack-dev-server 的基本配置

首先安装cnpm i -D webpack-dev-server

然后在 build/webpack.config.js里修改

设置一个变量  

//定义一个变量来；确定当前环境是否是开发环境；process.env.NODE_ENV是在我们设置在package.json命令行的值； 
const isDEV=process.env.NODE_ENV==="development";

这个变量决定了当前环境是否是开发环境如果是开发环境 ，那么应用另外一套配置；

//如果 是开发环境 那么 应用开发 的 配置
if(isDEV){
    //webpack-dev-server配置
  config.devServer={
      // 设置绑定的ip 0。0。0。0 是最合适的；
        host:'0.0.0.0',
      //输出的端口
        port:'8888',
      //dev-server引用的静态文件的路径,在此我们使用output打包编译过的文件
      contentBase:path.join(__dirname,"../dist"),
      //启动  hot-module-  热更新；
      //hot:true
      // 在编译过程中有错误，给予窗口提示
      overlay:{
            errors:true
      }
      
  }
}

module.exports= config;

安装cross-env  cnpm i -D cross-env； 跨平台的 

然后在package.json里配置脚本段：

"dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",

用命令启动webpack-dev-server会发现 app。js 404了  原因是因为 引用不到public下的文件，因为之前打包的操作是引用到了public下的资源；所以默认路径是/public  ；

解决：

   //webpack-dev-server配置
  config.devServer={
      // 设置绑定的ip 0。0。0。0 是最合适的；
        host:'0.0.0.0',
      //输出的端口
        port:'8888',
      //dev-server引用的静态文件的路径,在此我们使用output打包编译过的文件
      contentBase:path.join(__dirname,"../dist"),
      //启动  hot-module-  热更新；
      //hot:true
      // 在编译过程中有错误，给予窗口提示
      overlay:{
            errors:true
      },
      // 重新设置 所有的 路径都要通过public路径去访问
      publicPath:"/public",
      // 然后 index 手动加上路径/public
      historyApiFallback:{
            index:"/public/index.html"
      }

  }

并且删除dist 目录  因为dist 目录 是在硬盘上的  webpack 会优先读取 ，这样就会导致404 报错；

然后就可以读取到了；