从零构建属于你的Webpack开发环境——Webpack-dev-server

Webpack-dev-server 是 Webpack 官方推出的一款开发工具，根据它的名字我们就应该知道，它提供了一个开发服务器，并且将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起。

    可能大家都听说过'热更新'这个词，在使用Vue或React官方提供的脚手架工具时，基本上都是默认开启的，Webpack-dev-server就是提供了这个功能，为了节省我们手动配置webpack的配置，我们可以使用webpack-dev-server来快速开启一个开发环境。
    
    ## 安装Webpack-dev-server
    
    ``` bash
    npm install webpack-dev-server --save-dev
    ```
    
    安装完成后，在项目根目录下新建一个webpack.config.js文件，用于配置Webpack。
    
    ## 配置Webpack
    
    ``` javascript
    const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
      devServer: {
        contentBase: './dist',
        hot: true,
      },
    };
    ```
    
    ## 运行Webpack-dev-server
    
    ``` bash
    webpack-dev-server
    ```
    
    这样就成功运行了一个Webpack开发环境，默认情况下，它将在localhost:8080端口上运行。
    
    ## 使用Webpack-dev-server
    
    在浏览器中访问localhost:8080，即可看到Webpack-dev-server的默认页面。在这个页面中，你可以看到Webpack的版本号，以及一些关于Webpack-dev-server的信息。
    
    在src目录下创建一个index.js文件，并输入以下代码：
    
    ``` javascript
    console.log('Hello World!');
    ```
    
    保存文件后，Webpack-dev-server会自动编译并刷新浏览器，你将在控制台中看到"Hello World!"。
    
    ## 小结
    
    Webpack-dev-server是一个非常有用的工具，可以帮助我们快速搭建一个Webpack开发环境，并提供热更新功能，极大地提高了前端开发效率。