craco-plugin-multipage v0.1.5
craco-plugin-multipage
Cracte-React-App craco 多页面插件
使用 Usage
创建 App
npx create-react-app my-app
安装 @craco/craco
能看到这个插件,你一定也知道@craco/craco。
npm i -D @craco/craco
安装之后记得根据@craco/craco 文档,修改 package.json 中的 scripts
安装 craco-plugin-multipage
npm i -D craco-plugin-multipage
配置@craco/craco
添加 craco.config.js
// craco.config.js const CracoPluginMultipage = require("craco-plugin-multipage"); module.exports = { plugins: [ { plugin: CracoPluginMultipage, options: {}, }, ], };
调整目录结构
由
my-app ├── node_modules ├── craco.config.js ├── package.json └── src ├── App.css ├── App.js ├── index.js ...
调整为
my-app ├── node_modules ├── craco.config.js ├── package.json └── src ├── page1 ├── App.css ├── App.js ├── index.js ... ├── page2 ├── App.css ├── App.js ├── index.js ... └── page3 ├── page4 ├── App.css ├── App.js ├── index.js ... └── page5 ├── App.css ├── App.js ├── index.js ...
src 文件夹下包含 index.js 的会被认为是一个页面 当一个文件夹包含 index.js 时,其内部仍存在页面时,其内部的页面会被忽略;例如,如下目录结构,page2 将会被忽略。如果一个文件夹同时包含文件和文件夹且不存在 index.js 文件,则整个文件夹都会被忽略。
my-app ├── node_modules ├── craco.config.js ├── package.json └── src ├── page1 ├── App.css ├── App.js ├── index.js ... ├── page2 ├── App.css ├── App.js ├── index.js ...
启动
npm run build / start
Options
options
属性 | type | default | desc |
---|---|---|---|
htmlOutputDir | string | "pages" | html 的输出目录,相对于 build 目录 |
pages | string | "" | 指定启动的页面,默认全部,多个时用英文逗号分隔,支持命令行 |
ignore | string | "" | 忽略的页面,优先级高于 pages,支持命令行。 |
pageTitle | object | {} | 页面的 title 分页面配置 |
defaultTitle | String | "React App" | 页面默认的 title,pageTitle 匹配不到或者未配置时使用。 |
HtmlWebpackPluginOptions | {object|Function} | {} | HtmlWebpackPlugin 的配置,为 Object 时可以覆盖除 title、chunks、filename 之外的其他属性;为 Function 时,每个页面都会调用它,入参为原 HtmlWebpackPlugin 的 Config 需要返回一个新的 HtmlWebpackPlugin 的 Config,关于HtmlWebpackPlugin配置 |
htmlOutputDir
编译生成的 html 的输出目录,相对于 build 目录,默认为 pages。
pages
指定编译的页面,多个页面时通过英文逗号分隔。
使用Path-to-RegExp匹配。
// craco.config.js
const CracoPluginMultipage = require("craco-plugin-multipage");
module.exports = {
plugins: [
{
plugin: CracoPluginMultipage,
options: {
pages: "page1,page3/page4",
},
},
],
};
也可以通过命令行指定编译的页面,命令行参数和 options 中的参数将会合并,无优先级区分。
npm run build -- --pages page1,page3/(.*)
上面的命令将会会编译 page1 和 page3 目录下的 page4,page5
ignore
指定无需编译的页面,多个页面时通过英文逗号分隔,规则同上。
// craco.config.js
const CracoPluginMultipage = require("craco-plugin-multipage");
module.exports = {
plugins: [
{
plugin: CracoPluginMultipage,
options: {
pages: "page1",
ignore: "page3/(.*)",
},
},
],
};
优先级高于 pages ,故ignore 和 pages 同时命中同一个页面时,该页面将会被忽略。 也可以通过命令行指定,命令行参数和 options 中的参数将会合并。
npm run build -- --pages page1,page3/(.*) --ignore page3/page4
上面的命令将会编译 page1 和 page3 目录下的 page5,而忽略 page3/page4。
pageTitle 和 defaultTitle
页面的 title,默认为{},pageTitle 如果页面未匹配到 title,则使用 defaultTitle。
// craco.config.js
const CracoPluginMultipage = require("craco-plugin-multipage");
module.exports = {
plugins: [
{
plugin: CracoPluginMultipage,
options: {
pageTitle: {
page1: "1号页面",
"page3/page4": "3/4号页面",
},
defaultTitle:"React App"
},
},
],
};
要使用 title 属性,需要将模板 public/index.html 中的 title 部分修改为
<title><%= htmlWebpackPlugin.options.title %></title>
HtmlWebpackPluginOptions
HtmlWebpackPlugin 的配置,为 Object 时可以覆盖除 title、chunks、filename 之外的其他属性。
为 Function 时,每个页面都会调用它,入参为原 HtmlWebpackPlugin 的 Config 需要返回一个新的 HtmlWebpackPlugin 的 Config,可以覆盖所有的属性,关于HtmlWebpackPlugin配置。
// craco.config.js
const CracoPluginMultipage = require("craco-plugin-multipage");
module.exports = {
plugins: [
{
plugin: CracoPluginMultipage,
options: {
HtmlWebpackPluginOptions: (config) => config,
},
},
],
};