Menu
I am new to webpack and would like to use it with reactjs but kind of lost confused right now. I would like to know how css is handled in the client site development process with webpack. I know that webpack bundles all my js and links it as bundle.js which I reference in my html file like this:<script src="http://localhost:3000/assets/bundle.js"></script> based on my configuration of webpack-dev-server.
Now, I do have also a css file. Where does this go? what would be my url to reference this in my html file.
I understand that there is a style-loader and a css-loader and also an ExtractTextPlugin, but where does the output belong? I saw that I can var css = require('path/customStyle.css') but dos not seems to see where it appears? I do this in my index.jsx file.
So the question his: How to get this together, that I can reference my customStyle.css. What do I do wrong, or what do I miss
Here is my project folder structure:
|_source
| |_js
| |_js
| | |_components
| | |_ *.jsx
| |_index.jsx
|_assets
| |_css
| |_customStyle.css
|__index.html
My webpack.config.js looks like this
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './source/js/index.jsx',
output: {
filename: 'bundle.js',
publicPath: 'http://localhost:8090/assets'
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader","css-loader")
}
]
},
externals: {
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx','.css']
},
plugins:[
new ExtractTextPlugin("styles.css")
]
}
Html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../node_modules/react/dist/react-with-addons.js"></script>
<!-- like to link css here but don't know the path to link to -->
</head>
<body>
<div id="container">
</div>
<script src="http://localhost:3000/webpack-dev-server.js"></script>
<script src="http://localhost:3000/assets/bundle.js"></script>
</body>
</html>
Any help with some background on how the webpack way works and how to get my styles in would be fantastic.
717
Configure webpack css-loader and style-loader 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.
Importing CSS files in JavaScript wouldn't be possible without webpack. Once we connect css-loader , webpack will be able to work with this import and bring our CSS files into the bundle. So, to begin to understand CSS modules, let's begin by first looking at this import declaration: import styles from './style.
The functionality can be enabled through purgecss-webpack-plugin. At best, PurgeCSS can eliminate most, if not all, unused CSS rules.
Webpack v4+ will minify your code by default in production mode .
Your css will be bundled together with the Javascript file. There is no seperate css file to link in your html. You can use the extract-text-webpack-plugin to create a separate css file for production.
Also you might want to avoid putting absolute urls in your html. Better use a template and have webpack inject the right script tags by using the html-webpack-plugin. This is what your template might look like (example taken from YARSK):
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Yet Another React Starter Kit</title>
<link rel="stylesheet" href="app.{%=o.webpack.hash%}.css" media="all">
</head>
<body>
<div id="app"></div>
<script src="{%=o.htmlWebpackPlugin.assets.main%}"></script>
</body>
</html>
I suggest to have a look at the YARSK starter kit to see how it's done.
115
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
