PDWebpack

这是一个面向框架开发、作用于 webpack 的快速开发手脚架。将 webpack 的配置拆解并提供工具去生成它。

gitee

github

简易装载

使用内置的加载模块代替直接输入配置。整合多个常用模块提供完整的原生体验。更易使用，且具有更高的可读性。

> > 原生 webpack

entry: {
    app:"main.js",
    index:"index.js"
},
plugins: [
    new ScriptExtHtmlWebpackPlugin({defer: ['main', 'index']}, HtmlWebpackPlugin)
]

> > 函数化加载

confload.runOf("ModeLoad", (mode) => {
    mode.addMode("app", "main.js", "defer");
    mode.addMode("index", "index.js", "defer");
});

以上代码编写在 run.js 中

处理模块

内置加载模块系统，整合同一种文件的多种处理模块和加载方式。可添加自己的模块或基于当前模块进行变形，并通过配置加载模块管理。

> > 启动 confload 进行多模块加载

// 加载 js 文件
confload.runOf("ModeLoad", (mode) => {
    mode.addMode("app", "main.js", "defer");
    mode.addMode("index", "index.js", "defer");
    // 切换加载用的模块
    return "PageLoad"
}).then((paloa) => {
    // 加载页面
    paloa.addPage("index", "index.html", ["index"], {title: "index"}, {pubchuncks: false});
    paloa.addPage("main", "main.html");
});

以上代码编写在 run.js 中

独立后的配置

将多项全局重复的数据独立到配置文件中，可通过 devtool 项单独设置开发环境配置

global.Conf = {
    /** 加载模块加载顺序 */
    configload: ['ModeLoad', 'PageLoad'],

    // js 模块输出配置
    jsOut: { outName: '[id][name][contenthash:8].js' },

    /** 开发者模式下的专属配置 */
    devtool: {
        /** 测试状态模块输出名称 */
        jsOut: {outName: '[name][hash:9][id].js'},

        /** 测试服务器端口 */
        port: 3000,
        /** 测试服务器访问地址 */
        host: "localhost"
    }
};

以上代码编写在 cofig / conf.js 中

使用

安装 Node.js 作为 webpack 的运行环境

前往 github/gitee 发行版下载源码包或直接 clone 主分支的源码作为项目使用即可

在项目文件夹下运行 npm -y init npm install --save-dev 初始化项目配置并安装依赖即可开始使用

详细使用请查看 git wiki 文档

gitee wiki github wiki