@biulight/craco-config-extensions
用于快速配置 craco.config.js 文件，支持基于文档地址动态指定文档中URL资源地址
Requirements
基于webpack5和@craco/craco@7.0.0
Install
npm install @biulight/craco-config-extensions --save-dev
yarn add --dev @biulight/craco-config-extensionsUsage
功能
钩子函数
修改
webpack配置的钩子函数
modifyOutputConfig
修改webpack的output配置
addDefinitionsEnvValue
修改DefinePlugin插件
addHtmlWebpackPlugin
修改 html-webpack-plugin 插件
addInterpolateHtmlPlugin
修改create-react-app内置的InterpolateHtmlPlugin插件
addSplitChunksPlugin
修改webpack的Optimization.splitChunks
Plugin
HtmlWebpackInjectHead
详见动态加载指定域名静态资源方案一
HtmlWebpackMixinRobot
详见动态加载指定域名静态资源方案二
cracoPlugin
sassResourcesLoader
sass-resources-loader的craco版本
const { sassResourcesLoader } = require(`@biulight/craco-config-extensions`)
module.exports = {
plugins: [
{
plugin: sassResourcesLoader,
options: {
resources: 'src/common/index.scss'
}
}
],
}工具函数
override
高阶函数，支持配置函数链式调用，详见示例
stringifyVal
将对象中value转换成JSON字符串
readAllDotenvFiles
读取指定.env文件中指定前缀的变量
LoadRobot
使用方式详见LoadRobot
示例
override函数
const { override } = require("@biulight/craco-config-extensions")
module.exports = {
webpack: {
configure: override(func1, func2),
},
}在 html 模板 head 标签里注入资源
const { HtmlWebpackInjectHead } = require("@biulight/craco-config-extensions")
module.exports = {
webpack: {
plugins: {
add: [
new HtmlWebpackInjectHead({
content: "<script src='preload.worker.js'></script>" /* 插入的内容 */,
position:
"start" /* start（默认值）: 在head顶部插入; end: 在head底部插入*/,
}),
],
},
},
}读取指定.env文件中指定前缀配置
文件读取规则等同于
create-react-app脚手架中读取.env
.env.production
__DYNAMIC_KEY=production.html.example.com
__DYNAMIC_ENV=PRD
__DYNAMIC_DOMAIN_SERVER=production.server.example.com
__DYNAMIC_STATIC_DOMAIN=production.cdn.example.com
const { readAllDotenvFiles } = require("@biulight/craco-config-extensions")
// 读取.env.production, .env.develpment, .env.stg 等文件
const { __DYNAMIC: DYNAMIC_ENV } = readAllDotenvFiles(
["production", "development", "stg"],
"__DYNSMIC"
)
/*
DYNAMIC_ENV:
*/注意事项
-
__DYNAMIC_KEY会被忽略，只用来指定 html 文件资源域名 -
__DYNAMIC_STATIC_DOMAIN: 当与loadRobot结合使用时，会自动创建base标签，并把 href 指向它的值
动态映射域名
import CracoEnv from "@biulight/craco-config-extensions/dist/loadRobot"
// 创建
const envInstance = CracoEnv.createInstance({
"production.html.example.com": {
ENV: "PRD",
DOMAIN_SERVER: "production.server.example.com",
// STATIC_DOMAIN: "production.cdn.example.com",
},
localhost: {
ENV: "DEV",
DOMAIN_SERVER: "/api",
// STATIC_DOMAIN: "/",
},
})
// 使用
const server = envInstance.DOMAIN_SERVER结合
HtmlWebpackInjectHead或HtmlWebpackMixinRobot使用时
import CracoEnv from "@biulight/craco-config-extensions/dist/loadRobot"
const envInstance = CracoEnv.getInstance();
const server = envInstance.DOMAIN_SERVER;动态加载指定域名静态资源
依托
html文件域名，动态加载指定 cdn 静态资源
方案一(旧方案)
- 使用 loadRobot 类的 umd 文件,提供全局变量
_BIU_LOAD_ROBOT
// 编辑craco.config.js文件
const CopyWebpackPlugin = require("copy-webpack-plugin")
const { HtmlWebpackInjectHead } = require("@biulight/craco-config-extensions")
module.exports = {
webpack: {
plugins: {
add: [
// 复制文件到打包产物目录
new CopyWebpackPlugin({
patterns: [
{
from: "node_modules/@biulight/craco-config-extensions/dist/loadRobot/index.umd.js",
to: "preload.worker.js",
},
],
}),
// 注入模板
new HtmlWebpackInjectHead({
content: "<script src='preload.worker.js'></script>" /* 插入的内容 */,
position:
"start" /* start（默认值）: 在head顶部插入; end: 在head底部插入*/,
}),
],
},
},
}- 往
html模版中注入变量
module.exports = {
webpack: {
configure: override(
addInterpolateHtmlPlugin({
...stringifyVal({ DYNAMIC_ENV }),
})
),
},
}- 修改
html模板
<!-- head头部加入实例化loadRobot逻辑 -->
<script>
_BIU_LOAD_ROBOT.createInstance(JSON.parse("%DYNAMIC_ENV%"))
</script>- 禁用
HtmlWebpackPlugin插件将生成的webpack文件添加到资产
- 修改
html-webpack-plugin
// 编辑craco.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
webpack: {
plugins: {
add: [
new HtmlWebpackPlugin({
...
inject: false, // disable automatic injections
})
]
}
}
}- 修改
html模板，动态加载资源
<head>
<!-- 插入如下代码 -->
<%= "<script>" %>
_BIU_LOAD_ROBOT.load([..."<%= htmlWebpackPlugin.files.css %>,<%= htmlWebpackPlugin.files.js %>".split(",")])
<%= "</script>" %>
</head>inject: false 示例，参考html-webpack-plugin
模板语法参考EJS
方案二（推荐）
使用
HtmlWebpackMixinRobot插件
修改craco.config.js 插件
- 禁用
HtmlWebpackPlugin插件将生成的webpack文件添加到资产
- 修改
html-webpack-plugin
// 编辑craco.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
webpack: {
plugins: {
add: [
new HtmlWebpackPlugin({
...
scriptLoading: "blocking", // 动态创建`script`标签时，`defer` 属性不生效
})
]
}
}
}- 使用
HtmlWebpackMixinRobot插件动态创建base标签并添加资产
const CopyWebpackPlugin = require("copy-webpack-plugin")
const { HtmlWebpackMixinRobot } = require("@biulight/craco-config-extensions")
module.exports = {
webpack: {
plugins: {
add: [
// 复制文件到打包产物目录
new CopyWebpackPlugin({
patterns: [
{
from: "node_modules/@biulight/craco-config-extensions/dist/loadRobot/index.umd.js",
to: "preload.worker.js",
},
],
}),
// js创建标签，添加 `webpack` bundle
new HtmlWebpackMixinRobot(HtmlWebpackPlugin, {
env: JSON.stringify(DYNAMIC_ENV), // 可选，默认值：默认读取 .env 文件动态变量
robotUrl: "preload.worker.js", // 可选, 当`robotUrl`和`env`同时存在，会实例化`loadRobot`类
robotInstance: "BIU_BIU", // 可选，挂载在`global`对象上key，默认值`BIU_LIGHT_ROBOT_INSTANCE`
force: true, // 可选,是否强制匹配pathname，默认值false(不匹配)
prefix: "__DYNAMIC" // 可选，当env配置为空时，指定 .env 文件动态变量的前缀，默认值 `__DYNAMIC`
})
]
}
}
}DYNAMIC_ENV: 详见读取指定.env文件中指定前缀配置