Webpack css installation et les bonnes pratiques

Je suis nouveau sur le webpack et que vous souhaitez l'utiliser avec reactjs mais un peu perdu confus maintenant. Je voudrais savoir comment css est gérée dans le site du client processus de développement avec webpack. Je sais que webpack bundles tous mes js et des liens comme bundle.js qui je de référence dans mon fichier html comme ceci:<script src="http://localhost:3000/assets/bundle.js"></script> basé sur ma configuration de webpack-dev-serveur.
Maintenant, j'ai aussi un fichier css. Là où cela ne va? quel serait mon url de référence présent dans mon fichier html.
Je comprends qu'il y est un style-chargeur et un css-chargeur et aussi un ExtractTextPlugin, mais où est la sortie appartiennent? J'ai vu que je peux var css = require('path/customStyle.css') mais le dos ne semble voir où il apparaît? Je le fais dans mon index.jsx fichier.
Donc, la question de son: Comment obtenir cet ensemble, que je peut faire référence à mon customStyle.css. Que dois-je faire de mal, ou que dois-je manquer
Voici mon projet de structure de dossier:

|_source
|   |_js
|       |_js
|       |    |_components
|       |      |_ *.jsx
|       |_index.jsx
|_assets
|  |_css
|    |_customStyle.css
|__index.html

Mon webpack.config.js on dirait que cette

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 fichier ressemble à ceci:

<!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>

Toute aide avec un peu de fond sur la façon dont le webpack fonctionne et comment obtenir mon styles serait fantastique.

  • C'est 2 ans une vieille question, et je suppose que vous devez avoir trouvé la solution. Si non, alors l'utilisation extract-text-webpack-plugin, css-loader, html-webpack-plugin pour organiser le HTML, JSX, fichiers CSS.
InformationsquelleAutor silverfighter | 2015-02-06
  1. 4

    Votre css sera fusionné avec le fichier Javascript. Il n'existe pas de fichier css séparé de lien dans votre code html. Vous pouvez utiliser l'extrait de texte-webpack-plugin pour créer un fichier css pour la production.

    Aussi, vous voudrez peut-être éviter de mettre des url absolues dans votre code html. Mieux utiliser un modèle et ont webpack injecter le droit des balises de script en utilisant le html webpack-plugin. C'est ce que votre modèle peut ressembler (exemple pris sur 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>

    Je suggère de jeter un coup d'oeil à la YARSK kit de démarreur pour voir comment c'est fait.

    InformationsquelleAutor Thijs Koerselman
  2. 2

    html-webpack-plugin peut générer index.html pour vous. Si vous avez besoin de quelque chose de plus personnalisé, il vous permet de personnaliser le modèle qu'il utilise. J'ai trouvé ce plugin très utile dans la pratique.

    Je aller plus en détail lors d'une chapitre de la mine. Il montre comment les différents bits de se connecter les uns aux autres.

    InformationsquelleAutor Juho Vepsäläinen
  3. 0

    Vous n'avez pas à beaucoup de css avec webpack. Tout ce qu'il faut, c'est qu'il les trouve, avec l'exigent. Le plus important est la façon dont vous organiser dans vos dossiers source. Nous avons eu un projet de grande envergure et depuis, tous les composants, il est devenu assez dispersés. Nous avons décidé de placer commun des fichiers de style d'un lieu et d'un volet spécifique au titre de la composante du dossier.

    InformationsquelleAutor Janne