npm init -y
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/bootstrap.js',
mode: 'development',
devServer: {
port: 3000
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
})
]
};
Explicação:
-
entry
: O ponto de entrada é o arquivo principal do seu aplicativo, geralmente oindex.js
. -
mode
: Define o modo de compilação; para desenvolvimento, isso facilita a depuração. -
devServer
: Configurações para o servidor de desenvolvimento do Webpack, definindo onde servir o conteúdo e em que porta. -
plugins
: Neste caso, usamos oHtmlWebpackPlugin
que simplifica a criação de arquivos HTML para servir os bundles do Webpack.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
entry: './index.js',
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 3000,
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // O template do HTML para ser usado
}),
new ModuleFederationPlugin({
name: 'App1',
filename: 'remoteEntry.js',
exposes: {
'./Module': './index.js',
},
// Optional: Compartilhar dependências do arquivo package.json
shared: require('./package.json').dependencies,
}),
]
};
ModuleFederationPlugin
: Configura este projeto para expor partes de si mesmo como módulos federados.
$ npm install --save-dev style-loader css-loader
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/i, // Regex para identificar arquivos de imagens
type: 'asset/resource',
},
],
},
import Icon from './icon.png';
ModuleFederationPlugin
: Configura este projeto para expor partes de si mesmo como módulos federados.
plugins: [
new ModuleFederationPlugin({
name: 'AppActions', // Nome do App
filename: 'remoteEntry.js',
exposes: {
'./Module': './index.js', // Arquivo que será exportado
},
// Optional: Compartilhar dependências do arquivo package.json
shared: require('./package.json').dependencies,
}),
],
Caso você queira adicionar arquivos HTML ao seu projeto, é preciso fazer os seguintes passos:
$ npm install --save-dev html-loader
// file.js
import html from "./file.html";
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.html$/i,
loader: "html-loader",
},
],
},
};