vue-mixins-loader

类似 Vue.mixin 功能的 loader，在 Vue 组件打包时，注入一些公共的配置。

如何你对这个 Loader 如何实现很感兴趣，可以戳这里 👉 我的博客·Gitee / 我的博客·GitHub。

安装

npm install vue-mixins-loader -save-dev

配置

• 以路径的方式引入：需要以绝对路径的方式引入，或者以别名的方式引入。

options: {
  // 绝对路径，使用 path.resolve 转为绝对路径
  mixin1: path.resolve('./src/utils/mixin1.js'),
  // 别名，@ 指向 ./src
  mixin2: '@/utils/mixin2.js',
}

• 使用自定义 mixin 对象，配置在 custom 属性中。由于 loader 的 options 在 webpack 内部处理时，会转为 JSON 格式，为确保配置能生效，需要使用 vue-mixins-loader 提供的 stringify 方法将其转为一个字符串类型。

options: {
  custom: stringify({
    props: {
      block: {
        type: Object,
        default: () => ({})
      }
    },
    mounted() {
      console.log("this is custom mixins's mounted");
    }
  });
}

使用

在 webpack.config.js 中配置，需要写在 vue-loader 之后，也即要先于 vue-loader 处理。

const path = require('path');
const { stringify } = require('vue-mixins-loader');

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
          {
            loader: 'vue-mixins-loader',
            options: {
              tools: path.resolve('./src/utils/tools.js'),
              tools2: path.resolve('./src/utils/tools2.js'),
              tools3: '@/utils/tools3.js',
              custom: stringify({
                props: {
                  block: {
                    type: Object,
                    default: () => ({})
                  }
                },
                mounted() {
                  console.log("this is custom mixins's mounted");
                }
              })
            }
          }
        ]
      }
    ]
  }
};

Tip：如果对 JS 类型的文件在打包时使用了 cache-loader ，由于缓存的存在，会导致修改 options 后，配置不会生效。为确保配置能生效，请不要使用 cache-loader，并且配置 cache: false 来禁用缓存。