0
respostas

css-loader - webpack

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');
}