Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin,

Estou com problema ao tentar utilizar o plugin extractTextPlugin,

o estranho é que sem utilizar o plugin está funionando corretamente, com essa configuração que estava antes está tudo ok:

            // ,{
            //     test: /\.css$/,
            //     loader: 'style-loader!css-loader'                
            // }

OBS: a questão é que utilizar esse plugin é exatamente o objetivo desta aula e pelo que vi é pré requisito para a próxima aula.

este é o conteúdo do meu arquivo webpack.config.js:

<!-- INICIO do arquivo webpack.config.js -->

const path = require('path');
const babiliPlugin = require('babili-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');


let plugins = [];

plugins.push(new extractTextPlugin("styles.css"));


if(process.env.NODE_ENV == 'production'){
    plugins.push(new babiliPlugin());
}

module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },    
    module: {

        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
            ,{
                test: /\.css$/,                
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }         
            ,{ 
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
            },
            { 
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            { 
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'file-loader' 
            },
            { 
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml' 
            }   
        ]
    },
    plugins: [

    ]
} 
<!-- FIM do arquivo webpack.config.js -->

Ao executar o comando "npm run buil-dev" ou "npm run build-prod", está exibindo a seguinte mensagem "como se eu não estivesse configurado o plugin":

ERROR in ./css/meucss.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (D:\DeveloperLab\CursoWebPack_Alura\projeto-webpack\client\node_modules\extract-text-webpack-plugin\dist\loader.js:53:11)
 @ ./app-src/app.js 5:0-27

ERROR in ./node_modules/bootstrap/dist/css/bootstrap-theme.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (D:\DeveloperLab\CursoWebPack_Alura\projeto-webpack\client\node_modules\extract-text-webpack-plugin\dist\loader.js:53:11)
 @ ./app-src/app.js 4:0-48

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (D:\DeveloperLab\CursoWebPack_Alura\projeto-webpack\client\node_modules\extract-text-webpack-plugin\dist\loader.js:53:11)
 @ ./app-src/app.js 3:0-42
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! client@1.0.0 build-dev: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the client@1.0.0 build-dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\s017230\AppData\Roaming\npm-cache\_logs\2019-02-21T18_17_44_531Z-debug.log
2 respostas

tive o mesmo problema, resolvi utilizando o multi-loader do node

npm install --save-dev multi-loader

e configurando o webpack.config.js da seguinte maneira:

      {
        test: /\.css$/,
        use: {
           loader: multi(`style-loader!css-loader`)
         }
      },

não esqueça de importar o modulo

const multi = require(`multi-loader`)
solução!

Não era esse o problema, revisei meu código e percebi que no final do arquivo webpack.config eu acabei deixando um um bug ao atribuir o array para a "variável" plugins do webpack, desta forma eu fazia o push dos plugins más ao final (esse bug) acabava zerando o array e quando tentava executar não havia plugins instanciados no array.

Veja ao final eu não estava atribuindo o meu array com as instâncias dos plugins, más sim um array vazio. ERRADO: plugins: [ ] CORRETO: "por ser o mesmo nome da variável do webpack", apenas: plugins

ou algo assim: plugins: plugins ou ainda: trocar o nome do meu array para algo como "listaPlugins": plugins: listaPlugins.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software