I extracted css using extract-text-webpack-plugin in webpack 4. The CSS is exctacted but when i run npm run build , the css is extracted but i get a message on screen saying
Entrypoint undefined = extract-text-webpack-plugin-output-filename.
The Entire Stack Trace is below:
$ npm run build
> [email protected] build /media/azeem/A036C96E36C945CE/DevlopersConsole/Projects/comp
> webpack
Hash: 81ca52e4a0297e3e830f
Version: webpack 4.7.0
Time: 52303ms
Built at: 2018-05-06 23:13:09
Asset Size Chunks Chunk Names
bundle.js 4.06 KiB main [emitted] main
css/main.css 58 bytes main [emitted] main
Entrypoint main = bundle.js css/main.css
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/main.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/main.scss 197 bytes [built]
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/one.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/one.scss 183 bytes [built]
[./src/app.js] 162 bytes {main} [built]
[./src/main.scss] 41 bytes [built]
[./src/one.scss] 41 bytes [built]
[0] multi ./src/app.js ./src/main.scss 40 bytes {main} [built]
+ 3 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!src/main.scss:
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/main.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/main.scss 197 bytes {0} [built]
+ 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!src/one.scss:
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/one.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/one.scss 183 bytes {0} [built]
Package.json file is:
{
"name": "comp",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"precss": "^3.1.2",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.7.0",
"webpack-cli": "^2.1.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC"
}
webpack.config.js
// const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin({
filename: 'css/main.css',
});
/*
* We've enabled UglifyJSPlugin for you! This minifies your app
* in order to load faster and run less javascript.
*
* https://github.com/webpack-contrib/uglifyjs-webpack-plugin
*
*/
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
/*
* SplitChunksPlugin is enabled by default and replaced
* deprecated CommonsChunkPlugin. It automatically identifies modules which
* should be splitted of chunk by heuristics using module duplication count and
* module category (i. e. node_modules). And splits the chunks…
*
* It is safe to remove "splitChunks" from the generated configuration
* and was added as an educational example.
*
* https://webpack.js.org/plugins/split-chunks-plugin/
*
*/
module.exports = {
entry : [ './src/app.js', './src/main.scss'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['env']
}
},
{
test: /\.(scss|css)$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader'},
{ loader: 'postcss-loader' },
{ loader: 'sass-loader' }
],
filename : 'mains.css',
publicPath: '/build/'
})
}
]
},
plugins: [
extractCSS,
],
mode: 'development',
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
}
},
devServer:{
contentBase: './'
}
};
Webpack documentation advises against using extract-text-webpack-plugin for css
:warning: Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.
Use the mini-css-extract-plugin instead.
Your webpack config might look something like the following instead:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
entry: ['./src/app.js', './src/main.scss'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['env']
}
},
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/main.css',
}),
],
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
}
},
devServer: {
contentBase: './'
}
};