ae86-app-base-webpack-config

基于 webpack-chain 封装的基础通用的 webpack 配置

介绍

ae86-app-base-webpack-config 是用于构建 Ae86 App 的基础 webpack 配置，其内部使用 webpack-chain 实现。

除此之外，ae86-app-base-webpack-config 还提供了 react 编译所需的 babel 配置。

API

ae86-app-base-webpack-config 对外提供如下 API，使用该 API 就可以得到对应的基础配置：

1. getBabelConfig 得到 react 相关的 babel 配置
2. getWebpackConfig 得到基础的 webpack 配置

getBabelConfig

getBabelConfig 的实现如下，可以看到具体的 babel 配置：

export = (isEnvDevelopment = false) => {
  return {
    presets: [
      [require.resolve('@babel/preset-env'), {}],
      [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
      require.resolve('@babel/preset-typescript'),
    ],
    plugins: [
      true
      && isEnvDevelopment
      && require.resolve('react-refresh/babel'),
    ].filter(Boolean),
    babelrc: false,
    configFile: false,
    cacheDirectory: true
  };
};

getWebpackConfig

getWebpackConfig 的实现如下：

import getBaseConfig = require("./webpack.base");
import getBuildConfig = require("./webpack.build");
import getDevConfig = require("./webpack.dev");
import chain = require("webpack-chain");

export = (
  mode: Mode = "development",
  config: chain,
  options?: ConfigOptions
) => {
  options = options || {};
  getBaseConfig(mode, config, options);
  if (mode === "development") {
    getDevConfig(config);
  } else {
    getBuildConfig(config);
  }
  return config;
};

根据 mode 的值可以获取开发、生产环境下的配置。

样式配置

ae86-app-base-webpack-config 内置对 css、less、sass、scss 的处理，其内部使用的 loader 和默认配置如下： | loader | 默认配置 | 说明 | | :---- | :---- | :---- | | miniCssExtractPlugin.loader | {esModule: false} | cssInline 为 false 的时候启用 | |style-loader | | | | css-loader | {  importLoaders:1,  sourceMap:true,  modules:  {    localIdentName:"[folder]-[local]-[contenthash:8]"  }  } | sourceMap 配置只针对生产环境，开发环境恒为 true。其中 modules 配置仅在开启 css modules 功能后才生效，例如使用 index.module.css,就会触发该配置 | | less-loader | {   lessOptions: { javascriptEnabled: true   }} | | | sass-loader | | | | postcss-loader | {sourceMap:true} | sourceMap 配置只针对生产环境，开发环境恒为 true |

样式的自定义配置

有时候，开发者希望对 loader 的配置进行修改。当然，我们提供了这个能力。使用 ae86-app-base-webpack-config 的时候，可以传入如下选项进行样式相关的自定义配置：

getBaseConfig(mode, config, {
  // 其他配置
  cssInline: false, // 默认false,该值决定使用miniCssExtractPlugin.Loader还是css-laoder
  sourceMap: true, // 该配置只针对生产环境，开发环境恒为true
  cssOptions:{
     miniCssExtractPluginLoaderOptions: {
      // miniCssExtractPluginLoader相关的配置
     };
    styleLoaderOptions: {
      // style-loader相关的配置
    };
    cssLoaderOptions: {
      // css-loader相关的配置
    };
    lessLoaderOptions: {
      // less-loader相关的配置
    };
    sassLoaderOptions: {
    // sass-loader相关的配置
    };
    postcssLoaderOptions: {
      // postcss-loader相关的配置
    };
  }
});

通过 cssOptions 配置可以增加额外的 loader 配置，如果属性名称和内置的属性相同，则会覆盖掉默认配置

字体资源配置

配置中使用了 url-loader 相关的字体资源做进行处理，具体配置如下： | 字体 | 默认配置 | 说明 | | :---- | :---- | ----- | | woff2 | { mimetype: "application/font-woff", name:'font/[name][ext]',limit: URL_LOADER_LIMIT, } | 其中 URL_LOADER_LIMIT 为 8192 | | ttf | { mimetype: "application/octet-stream", name:'font/[name][ext]',limit: URL_LOADER_LIMIT, } | 其中 URL_LOADER_LIMIT 为 8192 | | eot | { mimetype: "application/vnd.ms-fontobject", name:'font/[name][ext]',limit: URL_LOADER_LIMIT, } | 其中 URL_LOADER_LIMIT 为 8192 | | svg | { mimetype: "image/svg+xml", name:'font/[name][ext]',limit: URL_LOADER_LIMIT, } | 其中 URL_LOADER_LIMIT 为 8192 |

图片资源配置

对图片资源的处理使用了 webpack5 中的 asset/resource 模块,具体配置代码如下：

config.module
  .rule("images")
  .test(/\.(png|jpg|webp|jpeg|gif)$/i)
  // @ts-ignore
  .type("asset/resource")
  .set("generator", {
    filename: "images/[name][ext]",
  })
  .parser({
    dataUrlCondition: {
      maxSize: URL_LOADER_LIMIT,
    },
  });
// 对应的webpack配置为
{
    test: /\.(png|jpg|webp|jpeg|gif)$/i,
    type: 'asset/resource',
    generator: {
      filename:  "images/[name][ext]"
    },
    parser: {
      dataUrlCondition: {
        maxSize: URL_LOADER_LIMIT,
      },
    }
},

其中 URL_LOADER_LIMIT 为 8192

babel 配置

我们内置了相关的 babel 配置，用于来处理 react，其配置如下：

{
  presets: [
    [require.resolve('@babel/preset-env'), {}],
    [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
    require.resolve('@babel/preset-typescript'),
  ],
  plugins: [
    isEnvDevelopment
    && require.resolve('react-refresh/babel'),
  ].filter(Boolean),
  babelrc: false,
  configFile: false,
  cacheDirectory: true
}

其中 react-refresh/babel 在开发环境才会生效

其他配置

1. resolve 中 extensions 的配置：['.js', '.json', '.jsx', '.ts', '.tsx']

以上都是开发环境和生产环境一些通用的配置，在不同环境中配置也有不同。

开发环境额外配置

开发环境在基础配置上增加如下配置：

1. soure map: cheap-module-source-map
2. react 热更新支持（基于@pmmmwh/react-refresh-webpack-plugin）

生产环境额外配置

生产环境在基础配置上增加如下配置：

1. optimization 配置，使用了 terser-webpack-plugin 和 css-minimizer-webpack-plugin 对 js 和 css 进行优化

更多配置，请阅读ae86-app-base-webpack-config。

深度的自定义配置

你可以使用 webpack-chain 对的到的配置进行深度的修改，包括新增、修改、删除等。在此之前你需要去看看 ae86-app-base-webpack-config 的源码实现，它并不难