条件编译Loader

JavaScript

Loader

1
2
3
4
5
6
7
8
9
10
var loaderUtils = require('loader-utils')

var reg = /(?:\/\*|<!--)\s*#ifdef\s*(\w+)(?:\s*(?:\*\/|-->))?([\s\S]+?)(?:(?:\/\*|<!--)\s*)?#endif\s*\1\s*(?:\*\/|-->)/g

module.exports = function (source) {
    var options = loaderUtils.getOptions(this)
    return source.replace(reg, function (match, $1, $2) {
        return options[$1] ? $2 : ''
    })
}

config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
chainWebpack: config => {
        config.resolveLoader.alias.set('compile-loader', path.resolve(__dirname, './config/conditional-compile-loader.js'))
        config.module
            .rule('vue')
            .use('compile-loader')
            .loader('compile-loader')
            .tap(() => {
                return {
                    H5: true,
                    APP: true,
                    APPLET: true
                }
            })
            .end()
    }

usage

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
<template>
<!-- #ifdef H5 -->
<div class="public">这是H5环境</div>
<!-- #endif H5 -->

<!-- #ifdef APP -->
<div class="public">我是APP环境</div>
<!-- #endif APP -->

<!-- #ifdef DK -->
<div class="public">我是钉钉环境</div>
<!-- #endif DK -->

<!-- #ifdef APPLET -->
<div class="public">我是小程序环境</div>
<!-- #endif APPLET -->
</template>
<scirpt>
/* #ifdef H5 */
console.log(123);
/* #endif H5 */

/* #ifdef APP */
console.log(456);
/* #endif APP */

/* #ifdef DK */
console.log("dingtalk");
/* #endif DK */
</script>