88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
|
const path = require("path");
|
||
|
|
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||
|
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||
|
|
const Dotenv = require("dotenv-webpack");
|
||
|
|
const sveltePreprocess = require("svelte-preprocess");
|
||
|
|
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
|
||
|
|
|
||
|
|
const deps = require("./package.json").dependencies;
|
||
|
|
|
||
|
|
module.exports = {
|
||
|
|
// This says to webpack that we are in development mode and write the code in webpack file in different way
|
||
|
|
mode: "development",
|
||
|
|
//Our index file
|
||
|
|
entry: "./src/index.js",
|
||
|
|
//Where we put the production code
|
||
|
|
output: {
|
||
|
|
path: path.resolve(__dirname, "dist"),
|
||
|
|
filename: "bundle.js",
|
||
|
|
publicPath: "http://localhost:3001/",
|
||
|
|
},
|
||
|
|
module: {
|
||
|
|
rules: [
|
||
|
|
//Allows use of modern javascript
|
||
|
|
{
|
||
|
|
test: /\.js?$/,
|
||
|
|
exclude: /node_modules/, //don't test node_modules folder
|
||
|
|
use: {
|
||
|
|
loader: "babel-loader",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
//Allows use of svelte
|
||
|
|
{
|
||
|
|
test: /\.svelte$/,
|
||
|
|
use: {
|
||
|
|
loader: "svelte-loader",
|
||
|
|
options: {
|
||
|
|
preprocess: sveltePreprocess({}),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
//Allows use of CSS
|
||
|
|
{
|
||
|
|
test: /\.css$/,
|
||
|
|
use: [MiniCssExtractPlugin.loader, "css-loader"],
|
||
|
|
},
|
||
|
|
//Allows use of images
|
||
|
|
{
|
||
|
|
test: /\.(jpg|jpeg|png|svg)$/,
|
||
|
|
use: "file-loader",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
//this is what enables users to leave off the extension when importing
|
||
|
|
resolve: {
|
||
|
|
extensions: [".mjs", ".js", ".svelte"],
|
||
|
|
},
|
||
|
|
plugins: [
|
||
|
|
//Allows to create an index.html in our build folder
|
||
|
|
new HtmlWebpackPlugin({
|
||
|
|
template: path.resolve(__dirname, "src/index.html"),
|
||
|
|
}),
|
||
|
|
//This gets all our css and put in a unique file
|
||
|
|
new MiniCssExtractPlugin(),
|
||
|
|
//take our environment variable in .env file
|
||
|
|
//And it does a text replace in the resulting bundle for any instances of process.env.
|
||
|
|
new Dotenv(),
|
||
|
|
new ModuleFederationPlugin({
|
||
|
|
name: "remoteSvelte",
|
||
|
|
filename: "remoteEntry.js",
|
||
|
|
remotes: {
|
||
|
|
store: "store@http://localhost:7070/remoteEntry.js",
|
||
|
|
},
|
||
|
|
exposes: {
|
||
|
|
"./Counter": "./src/index.js",
|
||
|
|
},
|
||
|
|
shared: {
|
||
|
|
...deps,
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
////Config for webpack-dev-server module
|
||
|
|
devServer: {
|
||
|
|
historyApiFallback: true,
|
||
|
|
hot: true,
|
||
|
|
port: 3001,
|
||
|
|
},
|
||
|
|
};
|