Part 2 - Integrated webpack-dev-server

为什么需要继承webpack-dev-server?

实际上，当我们在开发项目的时候，我们需要添加一些其他的组件，需要对接rest api等等。

当我们添加路由组件或者使用axios 请求服务器api数据时，当我们双击项目入口文件index.html预览website时，会得到报跨域请求错误。

萎了解决这个问题，我们需要把项目编译产生的文件放到一台机器上跑。我们可以将这些文件放到IIS、Node Server、Tomcat等服务器上跑。但对于开发项目非常不方便。

以为我们需要一边开发一边实时去预览。

webpack-dev-server组件能够帮助我们解决这个问题。

webpack-dev-server能够提供给我们虚拟的服务器，当我们在开发的时候。当我们在完成代码编写并保存时，webpack-dev-server能够实时的更新我们的代码到浏览时进行预览，这就是热更新功能，并且能够在开发时进行跨域请求数据，非常这便于我们的开发。

下面让我们继续来继承webpack-dev-server。

继Part 1 - Create React App。

Step 1

1、npm install webpack-dev-server

2、当完成安装后，编辑package.json，添加一个run command,代码如下：

"scripts": {
    ...
    "dev":"webpack-dev-server --progress --config ./config/webpack.config.js"
  },

Step 2

打开webpack.config.js，用一下代码代替：

const path = require('path')
const publicPath='../build/'
const rootpath=path.resolve(__dirname,publicPath)

const HtmlWebpackPlugin= require('html-webpack-plugin')

module.exports={
    entry:{
        reactapp:'./index.js'
    },
    // output:{
    //     filename:'[name].js',
    //     path:rootpath,
    //     publicPath:publicPath
    // },
    devServer:{//webpackServer
        hot:true,//开启热更新
        host:'localhost',//主机名
        port:8056,//端口号
        open:true//编译完打开浏览器
    },
    mode:'development',
    module:{
        rules:[
            {
                test:/\.(js)$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test:/\.css$/,
                exclude:/node_modules/,
                use:['style-loader','css-loader']
            }
        ]
    },
    resolve:{
        modules:['node_modules'],
        extensions:['.js','.json']
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./public/index.html',
            inject:true
        })
    ]
}

从上面的代码我们看到注释了output，添加了一个devServer object。

Step 3

至此，全部的工作已准备好，我们在cmd中运行 npm run dev，待编译完成后，会自动打开浏览器，如下图：

 现在，当我们修改代码的时候，我们就可以实时在浏览器看到修改代码的效果。