const path = require ( "path" ) ; const { VueLoaderPlugin } = require ( "vue-loader" ) ; const MiniCssExtractPlugin = require ( "mini-css-extract-plugin" ) ; const HtmlWebpackPlugin = require ( "html-webpack-plugin" ) ; const { ModuleFederationPlugin } = require ( "webpack" ) . container ; module . exports = ( env = { } ) => ( { mode : "development" , cache : false , target : 'web' , devtool : false , entry : path . resolve ( __dirname , "./src/main.js" ) , output : { libraryExport : 'main' , publicPath : 'http://localhost:5001/' } , resolve : { extensions : [ ".vue" , ".jsx" , ".js" , ".json" ] , alias : { } , } , module : { rules : [ { test : /\.vue$/ , use : "vue-loader" , } , { test : /\.png$/ , use : { loader : "url-loader" , options : { limit : 8192 } , } , } , { test : /\.css$/ , use : [ { loader : MiniCssExtractPlugin . loader , options : { } , } , "css-loader" , ] , } , ] , } , plugins : [ new MiniCssExtractPlugin ( { filename : "[name].css" , } ) , new ModuleFederationPlugin ( { name : "home" , filename : "remoteEntry.js" , exposes : { "./Content" : "./src/components/Content" , "./Button" : "./src/components/Button" , } , shared : { vue : { requiredVersion : '^3.0.0' } } } ) , new HtmlWebpackPlugin ( { template : path . resolve ( __dirname , "./index.html" ) , } ) , new VueLoaderPlugin ( ) , ] , devServer : { static : { directory : path . join ( __dirname ) , } , compress : true , port : 5001 , hot : true , headers : { "Access-Control-Allow-Origin" : "*" , "Access-Control-Allow-Methods" : "GET, POST, PUT, DELETE, PATCH, OPTIONS" , "Access-Control-Allow-Headers" : "X-Requested-With, content-type, Authorization" , } , } , } ) ;