Vue.js 开发必备：轻松搭建 Webpack 本地服务器

前端

2023-12-15 03:35:50

引言

作为一名 Vue.js 开发者，拥有一套高效、便捷的开发环境至关重要。Webpack 本地服务器就是这样一个神器，它能为你的开发带来极大的便利，让你专注于编码本身，告别繁琐的刷新操作。

什么是 Webpack 本地服务器？

Webpack 本地服务器是一个基于 Node.js 和 Express 框架构建的开发服务器。它允许你轻松搭建一个本地开发环境，让浏览器实时更新你的代码改动，从而大幅缩短开发迭代周期。

搭建 Webpack 本地服务器

搭建 Webpack 本地服务器非常简单，只需几个步骤：

安装 webpack-dev-server：npm install --save-dev webpack-dev-server
在你的项目根目录创建一个 webpack.config.js 文件
在 webpack.config.js 中添加以下配置：

const path = require('path');

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