webpack-dev-server页面不能自动刷新的解决

webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载

通过官方文档各种配置，自己实验了一把，不知道是哪里出了问题，一直实现不了实时加载，后来查阅资料，一个很简单的配置就实现了实时加载，在这里记录一下：

需要先初始化webpack-dev-server

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

注意，如果像上面那样没有指定哪个版本的话就去下载，会下载最新的 webpack-dev-server，坑就在这里，如果你的项目中的 webpack不是最新的，那么你使用webpack-dev-server起来会有错误的，所以根据你的项目中的webpack版本去下载它，
比如我的项目使用的webpackv3X的版本就下载的是[email protected]的

在`webpack.config.js`中进行配置

1.需要在entry配置项中配置client：

本项目的common入口是公用方法，每个页面中都会使用到，所以，需要在每个页面中都能使用的入口文件中去，再填入client的配置，下面的配置指定了访问的url

entry:{
    'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
    'index':['./src/page/index/index.js'],
    'login':['./src/page/login/index.js']
  },

2.修改output配置：
坑就在这里，大家都知道output中的path是打包后文件放置的地方，并不是url访问文件的路径，而热更新需要提供出一个url访问文件的路径，所以还需要在多加一个 publicPath，对应的是url的路径

output:{
    path:path.resolve(__dirname, 'dist'),//存放文件的路径
    publicPath:'/dist/',//访问文件的路径,这里的根路径是根据url来的，比如访问http://localhost:8088/dist/，那么就是对应/dist/
    filename:'js/[name].js'
  },

- 在命令行输入

如果想像下面那样输入命令的话，你要确保你在全局安装过webpack-dev-server

webpack-dev-server --inline --port 8088

之后就在浏览器中打开http://localhost:8088/
就能实现实时加载了

截止到这一步，仅仅是简单的实现了自动刷新，但是并不能满足日常的开发

webpack-dev-server自动刷新，只是我们在开发时候需要的一个工具；

而在上面的entry，入口配置中，配置了
'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
打包的时候也会把入口的本地url打包到线上，显然是没有用的

解决方法：

在Node.js中，可以进行环境变量配置

那么接着打开刚刚修改好的webpack.config.js

配置一个环境变量，这个变量取值是 dev 或 online

// 环境变量配置，取值dev 或online
let WEBPACK_ENV         = process.env.WEBPACK_ENV || 'dev';

const configs = {............

2.然后更改一下entry配置项，去掉写死的url

const configs = {
    entry:{
            'common':['./src/page/common/index.js'],
            'index':['./src/page/index/index.js'],
            'login':['./src/page/login/index.js']
          },
    .......
}

3.更改 output配置

output:{
    path:path.resolve(__dirname, 'dist'),
    //更改的此处
    publicPath:'dev' === WEBPACK_ENV ? '/dist/' : '',
    filename:'js/[name].js'
  },

4.在configs输出之前，对之前声明的WEBPACK_ENV的值判断一下
如果是开发环境，那么我们就配置url读取路径

if('dev' === WEBPACK_ENV){
    configs.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

关键来了，WEBPACK_ENV是如何赋值的呢？

我们在启动这个项目的时候去赋值的，

输入命令行，启动项目并赋值给WEBPACK_ENV

npm run set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 8088

这一大串的命令行真的看上去很讨厌，

在package.json

"scripts": {
    "dev": "set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 8088",
    "build": "webpack"
  },

之后就可以愉快的输入命令

npm run dev