@hzab/webpack-config

webpack 相关核心配置

webpack 相关核心配置

使用

/**
 * 用户自定义的 webpack 配置文件
 * 注意：必须调用 mergeConfig，并传入 env
 */
const { resolve } = require("path");

const { mergeConfig } = require("@hzab/webpack-config");

module.exports = (env) =>
  // 必须调用 mergeConfig，并传入 env
  mergeConfig(
    env,
    // 用户自定义 webpack 配置
    {
      entry: "./src/index.tsx",
      // module: {
      //   rules: [
      //     {
      //       test: /\.(md)$/i,
      //       type: "asset/resource",
      //       generator: {
      //         filename: "static/[name]_[hash][ext][query]",
      //       },
      //     },
      //   ],
      // },
      resolve: {
        // 别名配置
        alias: {
          "@packages": resolve(__dirname, "./packages"),
          "@": resolve("./example"),
          "@assets": resolve("./example/assets"),
          "@service": resolve("./example/services"),
        },
      },
      devServer: {
        port: 3000,
        // 接口代理
        // https://webpack.docschina.org/configuration/dev-server/#devserverproxy
        proxy: {
          // http://localhost:3000/api -> http://localhost:13000/api
          "/api": "http://localhost:13000",
        },
      },
    },
    {
      // 是否关闭多环境配置，关闭之后请直接使用 public/config/config.js 文件，public-config 下的文件将失效！
      closeMulEnvConf: false,
      // 关闭 mock 接口功能
      closeMock: false,
      // 是否关闭内部样式处理规则，使用自定义规则
      closeStyleRules: false,
      lessLoaderOptions: {
        additionalData: `@import url(@/size.less);`,
      },
    },
  );

注意事项

• 源码中 resolve 目录是命令执行的目录(项目根目录)
• closeMulEnvConf: true 时，请直接使用 public/config/config.js 文件，public-config 下的文件将失效
• 使用 xxx.module.(css|less) 开启 css module 功能

mergeConfig 参数

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | -------- | -------- | ---- | ------ | ------------------------- | | env | Object | 是 | | webpack 环境变量 | | userConf | Object | 否 | | 用户自定义的 webpack 配置 | | option | Object | 否 | | 其他配置 |

option 参数

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | ----------------- | -------------- | ---- | ------ | ------------------------------------------------------------------------------------------------- | --- | | closeMulEnvConf | boolean | 否 | false | 是否关闭多环境配置，关闭之后请直接使用 public/config/config.js 文件，public-config 下的文件将失效 | | splitCssFile | boolean | 否 | true | 是否拆分 css 文件到 css 文件夹，css/main.xxx.css。默认开启，传 false 关闭 | | | closeMock | boolean | 否 | true | 关闭 mock 接口功能 | | mockPort | number | 否 | 3100 | 自定义 mock 接口端口 | | mockPortAuto | boolean | 否 | | mock 接口端口自增 | | closeStyleRules | boolean | 否 | | 是否关闭内部样式处理规则，使用自定义规则 | | componentsMode | boolean/Object | 否 | | 是否使用组件模式，可配置对应的 entry 地址 localEntry、prodEntry | | | localConf | Object | 否 | | 运行时的 webpack 配置参数 | | | buildConf | Object | 否 | | 编译时的 webpack 配置参数 | | | lessLoaderOptions | Object | 否 | | less loader options 配置参数 | | | processParams | Object | 否 | | 全局 process 参数 | |

• 注意，组件模式中 output 需要自行配置类库名称 output: { library: "list-render", } // 类库名称

代理配置

/**
 * 用户自定义的 webpack 配置文件
 * 注意：必须调用 mergeConfig，并传入 env
 */
const { resolve } = require("path");

const { mergeConfig } = require("@hzab/webpack-config");

module.exports = (env) =>
  // 必须调用 mergeConfig，并传入 env
  mergeConfig(
    env,
    // 用户自定义 webpack 配置
    {
      devServer: {
        port: 3000,
        // 接口代理
        // https://webpack.docschina.org/configuration/dev-server/#devserverproxy
        proxy: {
          // http://localhost:3000/api -> http://localhost:13000/api
          "/api": "http://localhost:13000",
        },
      },
    },
    {
       processParams: {
        env: {
          TTT_ENV: "TTT",
        },
      },
    }
  );

组件模式

• 适用于组件模板 webpack config
• 配置 output: { library: "list_render", }, // 类库名称, 用下划线连接字符
• 选择组件模式，并配置对应的 entry

/**
 * 用户自定义的 webpack 配置文件
 * 注意：必须调用 mergeConfig，并传入 env
 */
const { resolve } = require("path");

const { mergeConfig } = require("@hzab/webpack-config");

module.exports = (env) =>
  // 必须调用 mergeConfig，并传入 env
  mergeConfig(
    env,
    // 用户自定义 webpack 配置
    {
      // 组件模式自行配置
      output: {
        library: "webpack_config", // 类库名称, 用下划线连接字符
      },
      resolve: {
        // 别名配置
        alias: {
          // TODO: 本地开发测试，按需修改包名
          "@hzab/list-render": resolve(__dirname, "../src"),
        },
      },
      devServer: {
        port: 3000,
      },
    },
    {
      // 选择组件模式，并配置对应的 entry
      componentsMode: {
        localEntry: "./example/index.tsx",
        prodEntry: "./src/index.js",
      },
      // 是否关闭多环境配置，关闭之后请直接使用 public/config/config.js 文件，public-config 下的文件将失效！
      closeMulEnvConf: true,
    },
  );

组件开发

文件目录

• example 本地开发测试代码
• src 组件源码
• lib 组件压缩后的代码（暂无！！）

发布

• 注意：该组件无需 build

• 修改版本号

• 命令：npm publish --access public

• 发布目录：

  • lib
  • src