const webpack = require("webpack");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const { ModuleFederationPlugin } = require("webpack").container;
const HtmlWebpackPlugin = require("html-webpack-plugin");
const dotenv = require("dotenv");
const ports = require("../../scripts/ports");
dotenv.config();
const appName = process.env.VUE_APP_NAME || "starter";
module.exports = {
mode: "production",
entry: "./src/main.js",
output: {
filename: "[name].js",
chunkFilename: "[name].js",
chunkLoadingGlobal: `webpackChunk_${appName}`,
uniqueName: `${appName}`,
clean: true,
},
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",
},
extensions: [".js", ".vue"],
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: "index.html",
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env),
}),
new ModuleFederationPlugin({
name: `${appName}`,
filename: "remoteEntry.js",
exposes: {
"./ShowAdmin": "./src/components/ShowAdmin.vue",
"./routes": "./src/router/routes.js",
"./mount": "./src/bootstrap.js",
},
shared: {
},
}),
],
devServer: {
static: "./",
hot: true,
port: ports.starter,
headers: {
"Access-Control-Allow-Origin": "*",
},
},
};