如何正确的使用 Webpack-dev-server 调试-JavaScript中文网-JavaScript教程资源分享门户

Webpack-dev-server 是前端开发过程中常用的一个工具，在项目开发过程中可以实现自动构建、实时刷新和调试等功能。本文将详细介绍 Webpack-dev-server 的基础使用和进阶技巧，以及如何结合 Vue、React、Angular 等主流前端框架使用。

基础使用

首先，安装 Webpack 和 Webpack-dev-server

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

在项目中新建一个 webpack.config.js 配置文件，并添加 entry、output 和 devServer 等配置选项。

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

其中，entry 和 output 配置选项用于指定入口文件和输出文件路径，devServer 配置选项可以设置服务器相关选项，如实时刷新时的文件目录、压缩等等。

接下来，在 package.json 中添加一个启动脚本：dev: "webpack-dev-server --open"

然后，在终端中输入命令 npm run dev，你会看到一个浏览器页面打开，自动跳转到 http://localhost:9000，文件修改时，页面会自动刷新。这就是 Webpack-dev-server 的最基本使用。

进阶技巧

修改端口号

前面我们在 webpack.config.js 中设置了端口号为 9000，当然，你可以设置为其他端口号。修改后如下：

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080 // 修改为 8080 端口
}

配置代理

在实际开发中，后端可能提供的接口由于跨域等原因无法直接访问。此时我们需要配置代理访问。比如，我们将端口 9000 上的前端页面代理到端口 3000，同时代理后端 API 到端口 9000。配置如下：

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:9000',
            pathRewrite: {'^/api' : ''}
        }
    }
}

这样，当我们在前端代码中请求 /api 接口时，实际请求的是 http://localhost:9000/api。

热替换

在修改前端代码时，我们希望只更新改动的代码，而不是重新构建整个代码。这时我们可以使用 webpack 的热替换功能，即改动一个文件时，只刷新该文件，而不是整个页面。

在 webpack.config.js 中，使用 HotModuleReplacementPlugin 插件开启热替换功能：

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080,
        hot: true  // 开启热替换
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()  // 添加热替换插件
    ]
};

然后，在前端代码中，引入 webpack 的热替换模块：

if (module.hot) {
    module.hot.accept('./app.js', function() {
        console.log('Accepting the updated app module!');
        app = require('./app.js');
        app.init();
    })
}

这样当修改 app.js 文件时，就只会刷新该文件，而不是整个页面。

多页面配置

在某些情况下，我们需要同时开发多个页面，每个页面可以有自己的 entry 和 output 配置。这时我们可以在配置文件中设置多个 entry 和 output，然后在 devServer 对象中加入 index、contentBase 等属性指定不同的页面目录和启动方式。比如，下面的配置是基于 Vue 单页应用开发的多页面配置：

// www.javascriptcn.com code example
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
  entry: {
    index: './src/main.js',
    login: './src/pages/login/main.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js'
  },
  devServer: {
    index: 'index.html',
    contentBase: path.join(__dirname, 'dist'),
    publicPath: '/',
    port: 8080,
    historyApiFallback: {
      index: '/index.html'
    },
    noInfo: true,
    overlay: true,
    inline: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api': ''}
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

上面的配置中，entry 中包含 index 和 login 两个 entry，分别生成 index.js 和 login.js。

下面的 devServer 配置中，设置了：

index: 指定 webpack-dev-server 访问的入口页面为 index.html。
contentBase: 静态文件目录，这里指定为 dist。
publicPath: 静态文件前缀，可在页面中使用该前缀访问静态资源。
port: 端口号。
historyApiFallback: 将所有的 404 响应都返回 index.html。
noInfo、overlay、inline：开启实时刷新相关选项。

同时还设置了代理，将 /api 的请求转发到 http://localhost:3000。

除了以上这些进阶配置，Webpack 还提供了多种插件、Loader 等开发工具和优化方式，可根据实际需求选择使用。

结合框架使用

在 Vue、React、Angular 等框架中，通常有自己的脚手架和构建工具，如 create-react-app、vue-cli 等，这些工具大多内置了 Webpack-dev-server，并提供了一些默认配置方案。

在使用这些工具时，我们可以结合自己的实际需求，修改和扩展他们的配置和功能。比如，使用 vue-cli 3.x 创建一个 Vue 单页应用项目：

# 安装 vue-cli 3.x
npm install -g @vue/cli

# 创建项目
vue create my-app

创建完成后，我们可以在 package.json 的 scripts 中看到启动选项：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
}

然后取配置文件，可以发现使用的是 vue.config.js（而不是之前的 vue.config.js），它允许我们覆盖一些默认的配置，追加 Loader 和插件等内容：

// www.javascriptcn.com code example
module.exports = {
  devServer: {
    open: true,  // 自动打开浏览器
    proxy: {   // 配置代理
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {'^/api': ''}
      }
    }
  }
};

这样我们就可以利用 vue-cli 默认生成的配置文件，或者扩展 Webpack-dev-server 的配置，实现更多的开发需求。

结语

本文介绍了 Webpack-dev-server 的基础使用和进阶配置方法，涵盖了热替换、多页面、代理等设计模式，以及结合主流前端框架 Vue、React、Angular 等的使用方法。通过对 Webpack-dev-server 的掌握，可以大大提高前端项目开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d62b01a941bf7134bd6219

如何正确的使用 Webpack-dev-server 调试