webpack-dev-server 用于小型项目-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常需要使用到模块化打包工具 webpack。而 webpack-dev-server 则是 webpack 的一个插件，用来提供一个开发服务器，为我们的开发提供更加便捷的环境。

webpack-dev-server 是什么

webpack-dev-server 是一个基于 Node.js 和 Express 的开发服务器，它可以自动编译和打包代码，并且会在浏览器中实时显示修改后的结果。它还可以提供一些开发时的辅助功能，比如热更新、自动刷新等。

安装和使用

我们可以通过 npm 安装 webpack-dev-server：

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

安装完成后，在项目的 webpack 配置文件中添加如下代码：

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

其中 contentBase 指定了服务器的根目录，这里我们指定为 ./dist，表示我们的打包文件都会放在这个目录下。hot 则表示开启热更新功能。

然后我们在 package.json 文件中添加如下命令：

{
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js"
  }
}

这样我们在终端中运行 npm start 命令就可以启动 webpack-dev-server 了。

实例

我们来看一个简单的实例，首先创建一个 index.html 文件：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack-dev-server</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

然后创建一个 index.js 文件：

document.getElementById('app').innerText = 'Hello webpack-dev-server';

最后在 webpack 配置文件中添加如下代码：

// javascriptcn.com 代码示例
const path = require('path');

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

这里我们指定 entry 为 index.js，output 为 dist/bundle.js，表示我们的打包文件会放在 dist 目录下。

然后运行 npm start 命令，打开浏览器访问 http://localhost:8080，就可以看到页面上显示了 Hello webpack-dev-server。

现在我们修改 index.js 文件：

document.getElementById('app').innerText = 'Hello webpack-dev-server, I am updated!';

保存后，浏览器会自动刷新，页面上的文字也会更新为新的内容。

总结

webpack-dev-server 是一个非常实用的工具，它可以为我们的开发提供更加便捷的环境。在小型项目中使用 webpack-dev-server 可以提高我们的开发效率，同时也可以让我们更加专注于业务逻辑的实现。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655ef808d2f5e1655d91b076