如何使用 extract-text-webpack-plugin 导出多个文件

最近写 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，如果项目有需要，可以保持关注。