Webpack css setup and best practise

css reactjs webpack

11,913

Solution 1

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.

Solution 2

html-webpack-plugin can generate index.html for you. If you need something more custom, it allows you to customize the template it uses. I've found this plugin highly useful in practice.

I go into more detail at a chapter of mine. It shows how various bits connect to each other.

11,913

Author by

silverfighter

@silverfighter

Updated on July 28, 2022

Comments

silverfighter almost 2 years

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.