# 简介

代码编译插件，最核心的作用有两个:

生成子应用的资源清单(index.js 文件);
开发环境中将子应用与主应用集成在一起进行调试, 从而获得所见即所得的开发体验(本地配置的优先级更高);

当然还有一些其它的细节功能, 比如 jsonpFunction (opens new window)、$platform、externalAlias 等功能, 但这些功能不是必须的.

作为宿主应用的插件使用时，一般用于开发调试过程中自动加载子应用代码。对于生产环境，宿主应用加载子应用，更常见场景是自行编写代码从服务端接口获取子应用配置后加载,参考注册子应用，不在编译插件中进行配置。

TIP

它并不是必须的, 如果:

宿主应用支持 html 方式的加载(参考: 增加对html资源的支持)
开发环境集成调试使用 @jmodule/cli-bridge
避免全局函数冲突, 尤其是 webpack4 的 jsonpFunction 配置, 可以参考文档自己完成
[建议]输出的文件加上 chunkhash, 当然大部分框架已经默认提供了支持.

# 安装

npm i @jmodule/plugin-webpack -D

# 配置

// webpack.conf.js
const JModulePlugin = require('@jmodule/plugin-webpack');

module.exports = {
    ...others,
    plugins: [
        new WebpackJmodulePlugin(),
    ],
}

# 集成开发调试

为了获得更好的开发体验，我们可以对插件配置一些参数，以便在开发过程中调试。

TIP

通过配置插件的 devConfig 参数，可以将开发环境(通常，但依然可以配置其他环境的服务地址)的子应用或宿主应用集成到一个本地的开发服务上，用于进行集成调试。
进行集成调试时支持代码热加载，如果热加载失效，可以检查 publicPath 是否配置好。

module.exports = {
    ...others,
    plugins: [
        new WebpackJmodulePlugin({
            devConfig: {
                currentServer: 'http://localhost:8080',
                platformServer: 'http://localhost:8081',
                platformLocalPort: 8082,
                modulesConfig: {
                    childAppReact: {
                        type: 'app',
                        name: 'childAppReact',
                    },
                },
            },
        }),
    ],
}

TIP

插件参数可以单独放在项目根目录中，通过 .jmodule.conf.js 文件进行配置，仅在插件参数为空时读取该文件。参考：

配置项 →