前言

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

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

component.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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官方教程,使用如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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-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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"type": "object",
"additionalProperties": false,
"properties": {
"allChunks": {
"type": "boolean"
},
"disable": {
"type": "boolean"
},
"omit": {
"type": "boolean"
},
.....
}
}

修改后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"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 字段的用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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 添加包时,都需要重新修改(添加包会让所有模块恢复默认状态,npm 没这个问题),临时用是没问题的。

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