近来写 Vue 遇到了题目，来自于这里 自定义块；

简朴来讲，我想和官方教程一样，在 .vue 文件中包括一个 docs 的标签，像下面如许：

component.vue

<docs>
## This is an Example component.
</docs>

<template>
  <h2 class="red">{{msg}}</h2>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello from Component A!'
    }
  }
}
</script>

<style>
comp-a h2 {
  color: #f00;
}
</style>

依据官方教程，我只须要如许设置 webpack 即可：

webpack.config.js

// webpack 2.x
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // 提取 <docs> 中的内容为原始文本
            'docs': ExtractTextPlugin.extract('raw-loader'),
          }
        }
      }
    ]
  },
  plugins: [
    // 输出 docs 到单个文件中
    new ExtractTextPlugin('docs.md')
  ]
}

然则，如今我是要将一切的 .css 文件导出为一个 css 包，同时将一切的 docs 导出为一个文档包。

根据 extract-text-webpack-plugin 的官方教程，运用以下：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

看文档如许好像是能够的，然则新题目又涌现了，我用的是 vue-cli 的 webpack 模版构建的项目，内里的 module 和 plugins 两个设置是分开在两个差别文件中的，这就产生了两种处理思绪：

1. 把 module 和 plugins 写在同一个文件中，然后用官方教程设置即可；
2. 用援用模块的体式格局，将实例传递给 module 地点设置文件。

第一种要领对我来讲修正太大，设置都揉在一个文件看起来太费力了，不选！
第二种要领。。。我分文件就是想更大水平解耦，这一传实例，能够还不如第一种要领，弃之！！

那咋办呢？去看 extract-text-webpack-plugin 源码！

算了，考虑到能搜这文章的，应当没多少想看源码的，那我就不讲源码直接贴要领了：

在 extract-text-webpack-plugin 这个插件中，有一个设置项叫 id ，然则不管是官方教程照样代码中，都没有把这个特征真正开放出来，这里我们就须要 hack 一下了。

翻开你项目中的 node_modules 文件夹，找到 extract-text-webpack-plugin 这个文件夹，然后翻开，找到 schema 这个文件夹，其中有两个 .json 文件，我们须要手动来修正这两个文件。

在两个 .json 文件中，为 properties 对象增添一个子对象，以下：

修正前

{
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "allChunks": {
      "type": "boolean"
    },
    "disable": {
      "type": "boolean"
    },
    "omit": {
      "type": "boolean"
    },
    .....
  }
}

修正后

{
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "id": {
      "type": "string"
    },
    "allChunks": {
      "type": "boolean"
    },
    "disable": {
      "type": "boolean"
    },
    "omit": {
      "type": "boolean"
    },
    .....
  }
}

loader.json 和 plugin.json 两个文件都须要增添

修正完后，我们就能够如许写啦：

以下是将 .less 文件 和 .css 文件打包成一个 css 文件，然后将 .md 文件一致打包成一个大的 md 文件。⚠️注重 id 字段的用法：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          id: 'css',
          use: ['css-loader', 'postcss-loader']
        })
      },
      {
        test: /\.less$/i,
        use: ExtractTextPlugin.extract({
          id: 'css',
          use: ['css-loader', 'less-loader']
        })
      },
      {
        test: /\.md$/i,
        use: ExtractTextPlugin.extract({
          id: 'doc',
          use: ['raw-loader']
        })
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      id: 'css',
      filename: 'stylesheets/[name]-one.css'
    }),
    new ExtractTextPlugin({
      id: 'doc',
      filename: 'docs/[name].md'
    })
  ]
};

以上的功用有一个致命弊病：每次 yarn 增加包时，都须要从新修正（增加包会让一切模块恢复默许状况），暂时用是没题目的。

为了处理这个题目，我已提了 pull requests，假如项目有须要，能够坚持关注。