详解使用webpack打包编写一个vue-toast插件

一、简介

本文主要讲解如何使用 webpack 打包编写一个 Vue.js 的 toast 插件。我们将通过以下步骤创建一个简单的 Vue.js toast 插件：

1. 创建项目并安装必要的依赖
2. 编写插件代码
3. 配置 webpack 打包
4. 将插件添加到 Vue.js 项目中进行使用

二、项目创建和依赖安装

我们首先使用 npm 初始化一个新项目：

npm init -y

然后安装 vue、webpack 和必要的 loader：

npm install vue vue-template-compiler webpack webpack-cli css-loader vue-loader vue-style-loader --save-dev

三、编写插件代码

创建一个名为 vue-toast 的目录，并在其中创建一个名为 Toast.vue 的文件。下面是 Toast.vue 的代码：

<template>
  <div v-show="visible" class="vue-toast">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'VueToast',
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    show () {
      this.visible = true
      setTimeout(() => {
        this.visible = false
      }, 3000)
    }
  }
}
</script>

<style scoped>
.vue-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: rgba(0,0,0,.7);
  color: #fff;
  border-radius: 4px;
}
</style>

该组件定义了一个名为 message 的 prop 和一个显示组件的方法 show。show 方法向用户显示一个 toast，显示 3 秒钟后会自动消失。

接下来，我们将创建一个插件，该插件将 Toast.vue 组件挂载到 Vue.prototype 以便在我们的 Vue.js 项目中使用。创建一个名为 index.js 的文件，并在其中编写如下代码：

import VueToast from './Toast.vue';

const Plugin = {};

Plugin.install = function (Vue) {
  const VueToastConstructor = Vue.extend(VueToast);
  const toast = new VueToastConstructor();
  toast.$mount(document.createElement('div'));

  document.body.appendChild(toast.$el);

  Vue.prototype.$toast = {
    show (message) {
      toast.message = message;
      toast.show();
    }
  }
}

export default Plugin;

此插件创建一个 Vue 实例 toast，并将其实例挂载到文档的 body 中。插件还将 show 方法添加到 Vue.prototype 上，以便我们在项目中使用 $toast.show(message) 方法显示一个 toast。

四、配置 webpack 打包

我们已经编写了我们的插件代码并准备开始打包。我们将 webpack 配置文件分成两个文件，一个是开发模式（webpack.config.js），一个是生产模式（webpack.config.prod.js）：

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'vue-toast.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'vue-toast',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      }
    ]
  }
};

// webpack.config.prod.js
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = merge(baseConfig, {
  mode: 'production',
  optimization: {
    minimizer: [
      new TerserPlugin()
    ]
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
});

在以上代码中，我们定义了一个名为 vue-toast.js 的输出文件，它将被打包为一个 UMD 格式的包，以便它可以在浏览器和 NodeJS 中使用。

我们还为 .vue 文件定义了一个 vue-loader 解析器，并定义了对 .css 文件的处理方法。

五、将插件添加到 Vue.js 项目中使用

现在我们已经完成了我们的 toast 插件并打包成了一个 UMD 格式的文件，我们可以将它添加到我们的 Vue.js 项目中以便使用。我们可以选择使用 npm 安装已打包好的组件，或者使用 Webpack 打包后引入。这里我们选择使用 npm 安装。

npm install {package path}/vue-toast.js --save-dev

安装好之后，在我们的 main.js 中引入组件，并使用它：

import Vue from 'vue';
import VueToast from 'vue-toast';

Vue.use(VueToast);

new Vue({
  el: '#app',
  render: h => h(App)
});

然后我们可以在项目中这样使用：

this.$toast.show('Hello, world!');

至此，我们已经完成了使用 webpack 打包编写一个 Vue.js 的 toast 插件，并将其添加到了我们的 Vue.js 项目中。