@ecoding/base.build

// 工程通用打包配置

@ecoding/base.build

简单快速配置 abc.js

{
    mpa: boolean; // 是否是多页
    dll：boolean; // 是否打dll
    micro："main" | "child"; // 微前端主应用或子应用 默认null
    electron: boolean; // electron 是否是electron
    outputLibrary: string; // micro == child时生效，整个库向外暴露的变量名
    publicPath: string; // client cdn 资源前缀
    outputPath: string; // client build bundle 目录，相对命令执行目录
    runtimeChunk: bool; // 是否在html里内联webpack-runtime
    noClear: bool; // 是否使用 CleanWebpackPlugin, 默认false
    externals: object;
    /* externals
    {
        "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
        "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
        "electron": true,
    };
    */
    dev:{
        publicPath: string; // devserver 读这个
        port: number, // devserver 端口 默认 8080
        // https 支持
        server: {
            type: 'https',
            // Optional: Specify custom certificates
            options: {
                key: fs.readFileSync(path.join(__dirname, "./local.cxc.tech-key.pem")),
                cert: fs.readFileSync(path.join(__dirname, "./local.cxc.tech.pem"))
            //   ca: fs.readFileSync('/path/to/ca.pem'),
            }
        }
        proxy: [
            {
                context: ['/f2e/proxy'],
                target:"http://test.f2e-api.sciecomm.cn",
            }
        ]
    },
    ssr: {
        outputPath: string; // ssr build bundle 目录，相对命令执行目录
    }
}

注意：

内部已经支持了 sass 和 less 配置，默认 less，如果想要使用 sass，还需额外安装：

# "node-sass": "^7.0.3",
# "sass-loader": "^13.1.0",

npm i sass-loader node-sass -D --registry http://r.cnpmjs.org
# 或
npm i sass-loader node-sass -D --registry https://registry.npm.taobao.org

复杂自定义打包配置

在工程下新建 build.js，return webpack 的配置即可，注意完全按照 webpack 配置规则，框架无做任何干涉

module.exports = {
    externals: {
        react: "var window.React",
        moment: "var window.moment",
        lodash: "var window._",
        "react-dom": "var window.ReactDOM",
        "prop-types": "var window.PropTypes"
    }
};

Usage

{
    "@babel/core": "7.18.5", // babel
    "@babel/plugin-proposal-class-properties": "7.17.12", //  会将类中的属性编译，支持私有属性
    "@babel/plugin-proposal-decorators": "7.18.2", // 插件会支持类的装饰器语法, 包括类装饰器, 属性装饰器, 方法装饰器， tsconfig.json -> "experimentalDecorators": true,
    "@babel/plugin-proposal-private-methods": "7.17.12", //  会将类中的方法编译，支持私有方法
    "@babel/plugin-proposal-private-property-in-object": "7.17.12",
    "@babel/plugin-transform-runtime": "7.18.5", // babel 运行时工具集合
    "@babel/preset-env": "7.18.2", // babel插件集合
    "@babel/preset-react": "7.17.12", // babel 支持 react 插件
    "@babel/preset-typescript": "7.17.12", // babel 支持 typescript 插件
    "@ecoding/base.mock": "0.*", // 自己写的mock插件
    "@ecoding/base.spec": "*",
    "@svgr/webpack": "6.2.1", // webpack svg 插件
    "@typescript-eslint/eslint-plugin": "5.28.0", // eslint ts 插件
    "@typescript-eslint/parser": "5.28.0", // eslint ts 编译器
    "add-asset-html-webpack-plugin": "5.0.2", // 将某个文件打包输出到build目录下，并在html中自动引入该资源
    "autoprefixer": "10.4.7", // 可以自动在样式中添加浏览器厂商前，是postcss插件
    "babel-eslint": "10.1.0",
    "babel-loader": "8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "concurrently": "^7.3.0", // 并行执行node 命令
    "core-js": "3.23.1",
    "cross-env": "7.0.3",
    "css-loader": "6.7.1",
    "css-minimizer-webpack-plugin": "4.0.0",
    "eslint": "8.18.0",
    "globby": "^11.0.2",
    "html-webpack-plugin": "5.5.0", // html 模版插件
    "inline-chunk-html-plugin": "1.1.1", // 内联 webpack runtime 代码
    "less": "4.1.3",
    "less-loader": "11.0.0",
    "mini-css-extract-plugin": "2.6.1", // css压缩
    "postcss-loader": "7.0.0", // css向下兼容
    "rimraf": "^3.0.2",
    "style-loader": "3.3.1", // 编译 style 内联css
    "terser-webpack-plugin": "5.3.3", // js压缩
    "typescript": "4.8.3",
    "webpack": "5.73.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.9.2",
    "webpack-merge": "5.8.0",
    "webpack-node-externals": "^3.0.0", // 打包ssr时用
    "webpackbar": "5.0.2"
}