@hzab/webpack-config

@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);`,
      },
    },
  );

hash 缓存模式

webpack.config.js

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

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

module.exports = (env) =>
  // 必须调用 mergeConfig，并传入 env
  mergeConfig(
    env,
    // 用户自定义 webpack 配置
    {},
    {
      // 开启 hash 缓存模式
      isHash: true,
      // hash 缓存模式 publicPath 前缀
      hashPublicPath: "https://test.com/aaa/",
    },
  );

svg 组件形式

// svg 支持 组件形式导入，导入文件增加 query: icon.svg?svgEle
import SvgIcon from "svg-icon.svg?svgEle";

function Test() {
  return (
    <div>
      <SvgIcon />
    </div>
  );
}

注意事项

• 源码中 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 配置参数
processEnv	Object	否		全局 process.env 参数
filesystem	boolean	否		是否开启文件缓存
filesystemConf	Object	否		文件缓存配置
isHash	boolean	否		是否启用 hash 结果文件模式
timeHash	boolean	否		是否 hash 结果文件模式，是否增加时间戳
hashPublicPath	string	否		hash 结果文件前缀
onRun	Function	否		在开始读取 records 之前调用
onDone	Function	否		在 compilation 完成时执行
beforeBuild	Function	否		编译前回调，用于处理 config 或前置行为，必须返回 config 数据
svgrConf	Object	否		@svgr/webpack loader options 参数
customCssRules	Array	否		自定义 css less 规则
styleLoaderOptions	Object	否	-	设置 loader 相关配，回调函数为 handleStyleOpt 置

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

内置 环境变量参数 process.env.xxx

属性名称	属性类型	必须	默认值	描述
WEBPACK_ENV	Object	否		当前 webpack 运行环境
WEBPACK_HASH	Object	否		hash 模式下 hash 的值（取最后一次 commit hash 的前 12 位）
WEBPACK_PUBLIC_PATH	Object	否		webpack publicPath
PACKAGE_VERSION	string	否		package.json 中的版本号

代理配置

/**
 * 用户自定义的 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",
        },
      },
    },
    {
      processEnv: {
        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 组件源码

发布

• npm 源和云效源都需要发布

• 命令：npm publish --access public

• 发布目录：

  • src

nrm

• 安装 npm install -g nrm
• 增加源 nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
• 切换源 nrm use aliyun nrm use npm
• 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看） npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/

配置

配置文件

• 本地配置文件：config/config.js

webpack 配置文件

• config/webpack.config.js