Implementing webpack asset management tutorial .but webpack is not generating css file in output path
webpack.config.js
const config = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/build'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
}
]
}
};
index.js
import './style.css';
import Icon from './yo1.jpg';
function component() {
var element = document.createElement('div');
element.innerHTML = 'hello webpack'
element.classList.add('hello');
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
Problem
images are nicely created in build folder
but
it does not creates style.css in build folder , what wrong i am doing ?
To be able to use CSS in your webpack app, you need to set up a new loader. Out-of-the-box, webpack only understands Javascript and JSON. With a loader, you can translate another type of file to a format that webpack understands and can work with. There are many webpack loaders and each loader has a specific purpose.
Loaders are the node-based utilities built for webpack to help webpack to compile and/or transform a given type of resource that can be bundled as a javascript module. css-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string.
By default, Webpack will inline your CSS as Javascript tags that injects the CSS into the page. This sounds strange but it lets you do hot reloading in development. In production you extract them to a file using the ExtractTextPlugin, and require it with a normal link tag.
CSS Loader being a front-end component is defined as an npm Module that collects all the CSS files referenced in the working application to help webpack and consolidate into a string. This compiles an application of a particular resource as a JavaScript module (CSS to JS file).
webpack does not create separate css files. It get's bundled with the javascript and is injected into the DOM as style
tags by webpack bootstrap code.
If you want to create separate css file, you can use the ExtractTextPlugin - https://github.com/webpack-contrib/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
ExtractTextPlugin
is deprecated try https://github.com/webpack-contrib/mini-css-extract-plugin:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
],
},
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With