const webpack = require("webpack");
const path = require("path");
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

module.exports = {
	publicPath:process.env.NODE_ENV=="production"?"./":"/",  //打包配置，解决页面空白的配置方案。
	devServer: {
		open: true, //是否自动弹出浏览器页面
		https: false,
		hotOnly: false,
		proxy: {
			'/api': {
				target: 'http://192.168.0.123:8080', //API服务器的地址 
				ws: true, //代理websockets
				changeOrigin: true, // 虚拟的站点需要更管origin
				pathRewrite: {
					'^/api': '/'
				}
			}
		},
	},
	configureWebpack: {
		plugins: [
			new webpack.ProvidePlugin({
				cash: "cash-dom"
			}),
			new CKEditorWebpackPlugin({
				language: "en",
				translationsOutputFile: /app/
			})
		],
	},
	transpileDependencies: [/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/],
	chainWebpack: config => {
		const svgRule = config.module.rule("svg");
		svgRule.exclude.add(path.join(__dirname, "node_modules", "@ckeditor"));
		config.module
			.rule("cke-svg")
			.test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
			.use("raw-loader")
			.loader("raw-loader");

		config.module
			.rule("cke-css")
			.test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
			.use("postcss-loader")
			.loader("postcss-loader")
			.tap(() => {
				return styles.getPostCssConfig({
					themeImporter: {
						themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
					},
					minify: true
				});
			});
	}
};