@careteam/mfe-webpack-config

通用webpack配置

install

npm install @careteam/mfe-webapck-config

examples

// webpack.config.js
const cusConf = {
    mode: 'production',
    entry: {
        singleSpaEntry: './src/singleSpaEntry.js',
        store: './src/store.js',
    },
}
const options = {
    devPort: 9001, // dev启动port，默认9000
    frame: 'vue' //当前项目框架, 默认为react
    app: 'main' // 当前项目是主应用(main)还是子应用(sub)  （子应用css需要打入js，略有区别
    modularImportCare: false // 是否使 care-ui 按需引入
    analysis: { // 静态资源分析相关配置（可选）, 配置之后会自动上传打包结果
        projectName: 'dragon-boat'
    }
}

const config = require('./webpack-base.config')(cusConf, options);
// 手动添加自定义部分配置

module.exports = config;

// webpack-dev.config.js
const cusConf = {
    mode: 'development',
    entry: {
        singleSpaEntry: './src/singleSpaEntry.js',
        store: './src/store.js',
    },
    output: {
        filename: 'js/[name].js',
        chunkFilename: 'js/[name].js'
    }
}
const options = {
    devPort: 9001,
}

const config = require('./webpack-base.config')(cusConf, options);

// 手动添加自定义部分配置

module.exports = config;

部分功能使用case

css module

import s from './index.less?module';
function Example() {
    return <div className={s.test}></div>
}

BUNDLE_ENV打包环境

• 启动命令添加NODE_ENV

{
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config=webpack-dev.config.js",
    "build:test": "cross-env NODE_ENV=test webpack --config=webpack.config.js -p --progress",
    "build:prod": "cross-env NODE_ENV=production webpack --config=webpack.config.js -p --progress",
}

• 环境配置

import development from './development';
import test from './test';
import production from './production';

const env = {
  development,
  test,
  production,
}

export default env[process.env.BUNDLE_ENV];

ModuleFederation资源策略接入