ksc-webpack-plugins

KSC Webpack Plugins 集合

使用方法

npm install ksc-webpack-plugins

const IcofontWebpackPlugin = require("ksc-webpack-plugins").IcofontWebpackPlugin;

const VFSModulesPlugin = require("ksc-webpack-plugins").VFSModulesPlugin;

module.exports = function () {
    return {
        plugins: [
            new IcofontWebpackPlugin(IcofontWebpackPluginOptions),
            new VFSModulesPlugin(VFSModulesPluginOptions)
        ]
    }
}

IcofontWebpackPlugin额外说明

<!-- 字体图标使用 **IcofontWebpackPluginOptions.cssNamePrefix** 做主css , 单个图标使用`IcofontWebpackPluginOptions.cssNamePrefix-${svg文件名}`-->
<div>
    <i class="ksyunicon ksyunicon-notification"></i>
    <i class="ksyunicon ksyunicon-abc"></i>
    <i class="ksyunicon ksyunicon-bcs"></i>
</div>

// 入口js处加载生成的css **地址为IcofontWebpackPluginOptions.cssModulePath**
import "ksyunicon/webfont.css"

IcofontWebpackPluginOptions 参数说明

__test__目录下有webpack2 ,webpack3 例子 webpack4可以参考ksr 源码

.files

svg 文件夹目录 例如 path.resolve(__dirname, '**/*.svg') , 支持glob模式

.cssNamePrefix

css classname 前缀

.cssModulePath

生成的支持引入的css虚拟文件 , 按需要自行引入到指定位置

.watchOptions

监听svg改动选项 , 一般不用配置 , 如需配置请参见chokidar

示例

IcofontWebpackPluginOptions = {
    files: path.resolve(__dirname, '**/*.svg'),
    cssNamePrefix:"ksyunicon",
    cssModulePath: "ksyunicon/webfont.css"
}

VFSModulesPluginOptions 参数说明

VFSModulesPluginOptions => modules

示例

VFSModulesPluginOptions = {
    'src/vfs.js':"console.log('=====')"
}