webpack5打包vue3的插件（vue页面打包配置）

使用原生JavaScript+webpack5+vue3做vue3插件测试：

---

使用webapck5插件：

• 一定要查看是不是vue3，如果是vue2会编译器不一样

    "vue": "^3.2.8",
    "vue-loader": "^16.5.0",
    "webpack": "^5.52.0",
    "@vue/compiler-sfc": "^3.2.8"

webpack.config.js配置vue

const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')

// vue-loader
const { VueLoaderPlugin } = require('vue-loader')

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, '../src/script.js'),
  output:
  {
    filename: 'bundle.[contenthash:10].js',
    path: path.resolve(__dirname, '../dist'),
    library: 'MyPlugin',
    libraryTarget: 'umd'
  },
  devtool: 'source-map',
  plugins:
    [
      // 引入插件
      new VueLoaderPlugin(),

      new CopyWebpackPlugin({
        patterns: [
          { from: path.resolve(__dirname, '../static') }
        ]
      }),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../src/index.html'),
        minify: true
      }),
      new MiniCSSExtractPlugin()
    ],
  module:
  {
    rules:
      [
        // vue
        {
          test: /\.vue/,
          use: ['vue-loader']
        },
        // HTML
        {
          test: /\.(html)$/,
          use: ['html-loader']
        },

        // JS
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                // 开始
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {
                      version: 3,
                    },
                    //   targets: {
                    //     chrome: '60',
                    //     firefox: '60',
                    //     ie: '9',
                    //     safari: '10',
                    //     edge: '17',
                    //   },
                  },
                ],
                // 结束
              ],
            },
          }
        },
        // CSS
        {
          test: /\.css$/,
          use:
            [
              MiniCSSExtractPlugin.loader,
              'css-loader'
            ]
        },

        // Images
        {
          test: /\.(jpg|png|gif|svg)$/,
          use:
            [
              {
                loader: 'file-loader',
                options:
                {

                  outputPath: 'assets/images/'
                }
              }
            ]
        },

        // Fonts
        {
          test: /\.(ttf|eot|woff|woff2)$/,
          use:
            [
              {
                loader: 'file-loader',
                options:
                {
                  outputPath: 'assets/fonts/'
                }
              }
            ]
        }
      ]
  }
}