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