@ali-i18n-fe/dada-component/libs/webpack/webpack.docs.js

dada component

const makeDevConfig = require("./webpack.dev.js");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { mergeWebpack } = require("./mergeWebpack");
const CopyPlugin = require("copy-webpack-plugin");
const { getDEFPublicPath } = require("../utils/def");
const { getDocsEntries, getPreviewFiles } = require("./utils");

module.exports = (options, mergeConfig = makeDevConfig) => {
  const devConfig = mergeConfig(options);

  const { rootPath, extendTemplate, mockPath } = options;
  const templatePath = path.resolve(__dirname, "../../public");
  const remotePublicPath = getDEFPublicPath();

  const publicPath = devConfig.output.publicPath;

  const mainResources = (() => {
    const { index, mobile } = devConfig.entry;

    return {
      index: index && publicPath + "index",
      mobile: mobile && publicPath + "mobile",
      template: publicPath + "template",
    };
  })();

  const { docsFiles, docsEntry, isLibraryComponent } = getDocsEntries();
  const previewFiles = getPreviewFiles();

  if (!docsFiles.length) {
    throw new Error(`未找到Docs文件，请检查Docs是否创建`);
  }

  const { name: packageName, version: packageVersion } = require(path.resolve(
    rootPath,
    "package.json"
  ));

  const result = mergeWebpack(
    devConfig,
    {
      name: "docs",
      output: {
        library: "[name]",
      },
      optimization: {
        splitChunks: {
          cacheGroups: {
            vendor: {
              name: "vendor",
              minChunks: 2,
              chunks: "all",
            },
          },
        },
      },
      plugins: [
        ...Object.keys(
          Object.assign({ index: "docs", "docs/index": "docs" }, docsEntry)
        ).map((key) => {
          const filename = `${key}.html`;
          let docsChunk = key;
          let route = key;
          if (!isLibraryComponent) {
            docsChunk = "docs/index";
            route = docsChunk;
          } else {
            if (!(key in docsEntry)) {
              docsChunk = Object.keys(docsEntry)[0];
            }
          }
          return new HtmlWebpackPlugin({
            title: "Development",
            inject: false,
            files: {
              js: ["index.js", "template.js"],
              css: ["index.css", "template.css"],
            },
            filename,
            libraryName: devConfig.output.library,
            port: devConfig.devServer.port,
            publicPath: devConfig.output.publicPath,
            remotePublicPath,
            route,
            isLibraryComponent,
            extendTemplate,
            packageName,
            packageVersion,
            mainResources,
            mockPath,
            externals: devConfig.externals,
            chunks: ["index", "mobile", docsChunk],
            template: path.resolve(templatePath, "./index.ejs"),
          });
        }),
        new CopyPlugin([
          ...previewFiles.map((preview) => ({
            from: path.resolve("src", preview),
            to: `docs/${preview}`,
          })),
          {
            from: path.resolve(templatePath, "dist"),
            to: ``,
          },
        ]),
      ],
    },
    options.webpackMerge || {},
    options.storiesWebpackMerge || {}
  );

  // for template must use default
  result.output.libraryExport = "default";

  result.entry = {
    ...docsEntry,
    // ...mapValues(docsEntry, value => ["webpack/hot/only-dev-server", value])
  };

  return result;
};