@attachments/serendipity-plugin-react
概述
提供封装好的 react 服务 (基于 webpack 5
),包括开发与构建。
安装
npx @attachments/serendipity add @attachments/serendipity-plugin-react
scripts
react start
启动 webpack-dev-server (开发环境,支持热更新)
react build
打包项目 (生产环境)
参数
interface ReactPluginOptions {
// webpack 配置
webpackConfig?: WebpackConfiguration
// dev server 配置
devServerConfig?: WebpackDevServerConfiguration
// 端口
port?: number
// host
host?: string
// webpack analysis port
analysisPort?: number
}
For Other Plugins
下面的 pluginInstance
表示插件实例,你可以在其它插件的 runtime 方法下通过以下方法获取:
class FooPlugin {
@Runtime()
initBabelForReactProject(options: RuntimeOptions) {
const plugin = options.matchPlugin('serendipity-react-plugin')
const instance: SerendipityReactPlugin = plugin.getPluginInstance() as SerendipityReactPlugin
if (instance) {
// do something....
}
}
}
API
pluginInstance.reactServiceHooks
生命周期钩子
// 合并 webpack 配置
instance.reactServiceHooks.beforeWebpackStart.tap('foo', (mergeFn) => {
mergeFn({
// 要合并的 webpack 配置
})
})
instance.reactServiceHooks.beforeDevServerStart.tap('foo', (mergeFn) => {
mergeFn({
// 要合并的 webpack-dev-server 配置
})
})
案例
下面的案例添加了 HtmlWebpackPlugin
到 webpack 配置中:
class FooPlugin {
@Runtime()
initBabelForReactProject(options: RuntimeOptions) {
const plugin = options.matchPlugin('serendipity-react-plugin')
const instance: SerendipityReactPlugin = plugin.getPluginInstance() as SerendipityReactPlugin
if (plugin && instance) {
instance.reactServiceHooks.beforeWebpackStart.tap('webpackMerge', (mergeFn) => {
mergeFn({
plugins: [
new HtmlWebpackPlugin()
]
})
})
}
}
}