webpack-builder-react-xd v4.0.0
介绍
@td/webpack-builder-react-xd 小盾安全前端团队 构建器
特性
- 基于webpack5、babel7开发
集成了 TypeScript构建、webpack-dev-server支持、热更新、最新的babel配置(支持到es2020)
不需要改动之前已有的代码,轻松接入
- 目前支持
dev
、build
两个常用构建指令 - 支持微前端构建,支持微前端单文件打包构建,支持统一入口打包构建
- package.json 负担减轻
- 提高开发效率、提示团队前端工程化能力
- 支持通过config-overrieds 文件去添加 webpack 配置
安装
npm install --save-dev @td/webpack-builder-react-xd
使用
package.json 配置
builder-config
这个配置告知构建器,你要使用什么方式去构建项目
"builder-config": {
"typescript": false,
"entry": "SPA",
},
Parameter | Description | Type | Optional Value | Default |
---|---|---|---|---|
devPublicPath | 开发环境publicPath | string | -- | '/' |
prodPublicPath | 生产环境publicPath | string | -- | '/' |
typescript | 是否开启ts构建 | boolean | -- | false |
entry | 项目入口 是单入口 还是多入口 | String | 'SPA','MPA' | 'SPA' |
npm scripts
"dev": "webpack-builder-react-xd dev",
"build": "webpack-builder-react-xd build",
Parameter | Description | Type | Optional Value | Default |
---|---|---|---|---|
dev | 开发 指令 | string | dev | dev |
build | 构建 指令 | string | build | build |
profile | 是否开启 profile 分析 | string | --profile | none |
micro | 是否是微前端构建 | string | --micro | none |
micro-single | 微前端单文件构建(这个参数必须在作为--micro 参数的下一个参数),默认是 统一入口构建 | string | pages/**folderName | none |
注意:如果是微前端构建的情况下
"build": "npm run clean && webpack-builder-react-xd build --stats --micro", -- micro后面只允许再传入一个参数(单文件构建名字),其他参数请放在--micro前面
Template 配置
config-overrides.js
现在项目中必须在根目录 添加 config-overrieds.js
,它可以让你添加webpack配置,哪怕你不需要也要返回config对象
在你不清楚的情况下 你最好只添加externals和devServer的配置,其他配置的已经内置好
alais别名: 已经动态读取了src下的目录,eg: src: src; components: components。文件夹名字是什么 别名就是什么
module.exports = function(config) {
config.externals = {};
config.devServer = {};
return config;
};
SPA入口项目
单入口页面: 入口文件index.ts
/ index.js
必须放在src文件夹根目录下
静态模板html: 项目根目录下创建 example
文件夹,并在example下创建index.html
作为静态模板html
MPA入口项目
多入口页面: 参照之前项目(aif-tool下面的方式),src/pages/**
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago