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/queenshowv1/` : "./"; // const publicPath = "./"; module.exports = defineConfig({ pages: { index: "src/pages/website/index.ts", editor: "src/pages/editor/index.ts", share: "src/pages/h5/share/index.ts", treeapi: "src/pages/queentree/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-cn", // 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; }, }, }, });