Pessoal, boa noite. Seguindo as aulas de webpack, ao colocar o plugin css-loader, ele continua a importar o link rel="stylesheet" para meu app.html na pasta dist. Mesmo com todos os passos da aula após usar o mini-css-extract-plugin para gerar um bundle de css, continua aparecendo no app.html esta chamada, além de não criar o arquivo bundle css na raiz de dist.
webpack.configs.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { Template } = require('webpack');
module.exports = {
entry: './app/src/js/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'app/dist'),
clean: true
},
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
} //regex pra ver se termina com .css e usa o módulo css loader
]
},
plugins: [
new HtmlWebpackPlugin({
template: './app/src/app.html',
filename: 'app.html',
hash: true
}),
new MiniCssExtractPlugin()
// new CopyWebpackPlugin({
// patterns: [{
// from: path.resolve(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.css'),
// to: path.resolve(__dirname, 'app/dist/css')
// }]
// })
]
};
app.js de src
import { NegociacaoController } from './controllers/negociacao-controller.js';
import 'bootstrap/dist/css/bootstrap.css';
const controller = new NegociacaoController();
const form = document.querySelector('.form');
if (form) {
form.addEventListener('submit', event => {
event.preventDefault();
controller.adiciona();
});
} else {
throw Error('Não foi possível inicializar a aplicação. Verifique se o form existe.');
}
const botaoImporta = document.querySelector('#botao-importa');
if (botaoImporta) {
botaoImporta.addEventListener('click', () => {
controller.importaDados();
});
} else {
throw Error('Botão importa não foi encontrado');
}