queenshow/vue.config.js

const { defineConfig } = require("@vue/cli-service");
const linariaLessLoader = require("@queenjs/webpack-loader/linaria-loader");
const modifyVars = require("./src/styles/theme-antd");
const path = require("path");
const {
  CKEditorTranslationsPlugin,
} = require("@ckeditor/ckeditor5-dev-translations");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

const publicPath =
  process.env.NODE_ENV === "production"
    ? `//infishwaibao.oss-cn-chengdu.aliyuncs.com/queenshow/`
    : "./";
// const publicPath = "./";

module.exports = defineConfig({
  pages: {
    index: "src/pages/website/index.ts",
    editor: "src/pages/editor/index.ts",
  },
  publicPath: publicPath,
  transpileDependencies: [/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/],
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
        runtimeErrors: false,
      },
    },
  },
  configureWebpack: {
    plugins: [
      // CKEditor 5 needs its own plugin to be built using webpack.
      new CKEditorTranslationsPlugin({
        // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
        language: "zh",
        // Append translations to the file matching the `app` name.
        // translationsOutputFile: /ckeditor/,
      }),
    ],
  },
  chainWebpack: (config) => {
    const tsRule = config.module.rule("ts");
    tsRule
      .use("moduse-loader")
      .loader("moduse/webpack-loader")
      .options({
        include: [
          path.resolve(__dirname, "./src/modules"),
          path.resolve(__dirname, "./node_modules/@queenjs-modules"),
        ],
      });

    const tsxRule = config.module.rule("tsx");
    tsxRule.uses.store.delete("thread-loader");
    tsxRule
      .use("@linaria/webpack-loader")
      .loader("@linaria/webpack-loader")
      .options({
        // 将.css文件更名为.less
        extension: ".linaria.less",
        preprocessor: linariaLessLoader("@/styles/theme"),
      })
      .before("ts-loader");

    const svgRule = config.module.rule("svg");
    // Then you can either:
    //
    // * clear all loaders for existing 'svg' rule:
    //
    //		svgRule.uses.clear();
    //
    // * or exclude ckeditor directory from node_modules:
    svgRule.exclude.add(path.join(__dirname, "node_modules", "@ckeditor"));

    // Add an entry for *.svg files belonging to CKEditor. You can either:
    //
    // * modify the existing 'svg' rule:
    //
    //		svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
    //
    // * or add a new one:
    config.module
      .rule("cke-svg")
      .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
      .use("raw-loader")
      .loader("raw-loader");

    // (2.) Transpile the .css files imported by the editor using PostCSS.
    // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
    config.module
      .rule("cke-css")
      .test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
      .use("postcss-loader")
      .loader("postcss-loader")
      .tap(() => {
        return {
          postcssOptions: styles.getPostCssConfig({
            themeImporter: {
              themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
            },
            minify: true,
          }),
        };
      });
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars,
          javascriptEnabled: true,
        },
      },
    },
  },
  pluginOptions: {
    windicss: {
      scan: {
        dirs: ["node_modules/@queenjs-modules"],
        fileExtensions: ["tsx"],
      },
      preflight: false,
      onOptionsResolved: (options) => {
        // make sure file @apply's get transformed
        options.scanOptions.extraTransformTargets = {
          css: [
            (f) => {
              if (/node_modules\\@queenjs-modules\\.+\.(css|less)/.test(f)) {
                return true;
              }
              return false;
            },
          ],
          detect: [],
        };
        return options;
      },
    },
  },
});