vue安装webpack5

首先需要安装 Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

安装完成后，可以通过以下命令创建一个新的 Vue 项目：

vue create my-project

接着，需要安装 webpack 5 和相关的 loader 和插件，可以通过以下命令安装：

npm install webpack@5 webpack-cli --save-dev
npm install css-loader style-loader --save-dev
npm install vue-loader vue-template-compiler --save-dev
npm install html-webpack-plugin --save-dev

在安装完成后，需要在项目根目录下创建一个 webpack 配置文件，比如 webpack.config.js。在配置文件中，需要配置入口文件、输出文件、loader 和插件等信息。

一个基本的 webpack 配置文件示例：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

在配置文件中，我们指定了入口文件为 src/main.js，输出文件为 dist/bundle.js。同时，我们使用了 vue-loader 和 css-loader，来处理 Vue 单文件组件和 CSS 文件。我们还使用了 html-webpack-plugin 插件，来生成最终的 HTML 文件。

最后，在 package.json 文件中添加以下代码，来指定使用 webpack 5：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead"
],
"resolutions": {
  "webpack": "^5.0.0"
}

这样就完成了 Vue 项目的 webpack 5 配置。可以通过以下命令启动项目：

npm run serve