vue3打包部署webpack

在 Vue 3 中，使用 webpack 进行打包部署非常简单，只需要安装好相关依赖，配置 webpack 配置文件即可。

下面是一个简单的 webpack 配置文件示例：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new VueLoaderPlugin(),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

在上面的配置文件中，我们使用了以下插件和 loader：

- `html-webpack-plugin`：用于生成 HTML 文件，并将打包后的 JS 文件自动注入到 HTML 文件中；
- `vue-loader`：用于加载和解析 Vue 单文件组件；
- `babel-loader`：用于将 ES6+ 语法转换为 ES5；
- `css-loader` 和 `vue-style-loader`：用于加载和解析 CSS 样式。

配置好 webpack 后，使用以下命令进行打包：

npm run build

打包完成后，生成的文件会被存储在 `dist` 目录下，可以直接将该目录下的文件部署到服务器上。另外，可以使用以下命令启动开发服务器：

npm run dev

该命令会启动一个开发服务器，可以在浏览器中访问 http://localhost:9000 进行开发和调试。