前言

最近写 Vue 遇到了问题,来自于这里 自定义块

简单来说,我想和官方教程一样,在 .vue 文件中包含一个 docs 的标签,像下面这样:

component.vue

1
<docs>
2
## This is an Example component.
3
</docs>
4
5
<template>
6
  <h2 class="red">{{msg}}</h2>
7
</template>
8
9
<script>
10
export default {
11
  data () {
12
    return {
13
      msg: 'Hello from Component A!'
14
    }
15
  }
16
}
17
</script>
18
19
<style>
20
comp-a h2 {
21
  color: #f00;
22
}
23
</style>

根据官方教程,我只需要这样配置 webpack 即可:

webpack.config.js

1
// webpack 2.x
2
var ExtractTextPlugin = require("extract-text-webpack-plugin")
3
4
module.exports = {
5
  module: {
6
    rules: [
7
      {
8
        test: /\.vue$/,
9
        loader: 'vue-loader',
10
        options: {
11
          loaders: {
12
            // 提取 <docs> 中的内容为原始文本
13
            'docs': ExtractTextPlugin.extract('raw-loader'),
14
          }
15
        }
16
      }
17
    ]
18
  },
19
  plugins: [
20
    // 输出 docs 到单个文件中
21
    new ExtractTextPlugin('docs.md')
22
  ]
23
}

但是,现在我是要将所有的 .css 文件导出为一个 css 包,同时将所有的 docs 导出为一个文档包。

按照 extract-text-webpack-plugin官方教程,使用如下:

1
const ExtractTextPlugin = require('extract-text-webpack-plugin');
2
3
// Create multiple instances
4
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
5
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
6
7
module.exports = {
8
  module: {
9
    rules: [
10
      {
11
        test: /\.css$/,
12
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
13
      },
14
      {
15
        test: /\.less$/i,
16
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
17
      },
18
    ]
19
  },
20
  plugins: [
21
    extractCSS,
22
    extractLESS
23
  ]
24
};

看文档这样好像是可以的,但是新问题又出现了,我用的是 vue-cliwebpack 模版构建的项目,里面的 moduleplugins 两个配置是分开在两个不同文件中的,这就产生了两种解决思路:

  1. moduleplugins 写在同一个文件中,然后用官方教程配置即可;
  2. 用引用模块的方式,将实例传递给 module 所在配置文件。

第一种方法对我来说改动太大,配置都揉在一个文件看起来太费劲了,不选!
第二种方法。。。我分文件就是想更大程度解耦,这一传实例,可能还不如第一种方法,弃之!!

那咋办呢?去看 extract-text-webpack-plugin 源码!

算了,考虑到能搜这文章的,应该没多少想看源码的,那我就不讲源码直接贴方法了:

extract-text-webpack-plugin 这个插件中,有一个配置项叫 id ,但是不管是官方教程还是代码中,都没有把这个特性真正开放出来,这里我们就需要 hack 一下了。

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

在两个 .json 文件中,为 properties 对象增加一个子对象,如下:

修改前

1
{
2
  "type": "object",
3
  "additionalProperties": false,
4
  "properties": {
5
    "allChunks": {
6
      "type": "boolean"
7
    },
8
    "disable": {
9
      "type": "boolean"
10
    },
11
    "omit": {
12
      "type": "boolean"
13
    },
14
    .....
15
  }
16
}

修改后

1
{
2
  "type": "object",
3
  "additionalProperties": false,
4
  "properties": {
5
    "id": {
6
      "type": "string"
7
    },
8
    "allChunks": {
9
      "type": "boolean"
10
    },
11
    "disable": {
12
      "type": "boolean"
13
    },
14
    "omit": {
15
      "type": "boolean"
16
    },
17
    .....
18
  }
19
}

** loader.json 和 plugin.json 两个文件都需要增加**

修改完后,我们就可以这样写啦:

以下是将 .less 文件 和 .css 文件打包成一个 css 文件,然后将 .md 文件统一打包成一个大的 md 文件。⚠️注意 id 字段的用法:

1
const ExtractTextPlugin = require('extract-text-webpack-plugin');
2
3
module.exports = {
4
  module: {
5
    rules: [
6
      {
7
        test: /\.css$/,
8
        use: ExtractTextPlugin.extract({
9
          id: 'css',
10
          use: ['css-loader', 'postcss-loader']
11
        })
12
      },
13
      {
14
        test: /\.less$/i,
15
        use: ExtractTextPlugin.extract({
16
          id: 'css',
17
          use: ['css-loader', 'less-loader']
18
        })
19
      },
20
      {
21
        test: /\.md$/i,
22
        use: ExtractTextPlugin.extract({
23
          id: 'doc',
24
          use: ['raw-loader']
25
        })
26
      },
27
    ]
28
  },
29
  plugins: [
30
    new ExtractTextPlugin({
31
      id: 'css',
32
      filename: 'stylesheets/[name]-one.css'
33
    }),
34
    new ExtractTextPlugin({
35
      id: 'doc',
36
      filename: 'docs/[name].md'
37
    })
38
  ]
39
};

以上的功能有一个致命弊端:每次 yarn 添加包时,都需要重新修改(添加包会让所有模块恢复默认状态,npm 没这个问题),临时用是没问题的。

为了解决这个问题,我已经提了 pull requests,如果项目有需要,可以保持关注。