Webpack css setup e best practice

Sono un neofita del webpack e vorrei usarlo con reactjs ma in qualche modo perso confuso al momento. Mi piacerebbe sapere come viene gestito il css nel processo di sviluppo del sito del cliente con il webpack. So che webpack raggruppa tutti i miei js e li collega come bundle.js che faccio riferimento nel mio file html come questo: <script src="http://localhost:3000/assets/bundle.js"></script> basato sulla mia configurazione di webpack-dev-server. Ora, ho anche un file css. Dove va questo? quale sarebbe il mio url per fare riferimento a questo nel mio file html. Capisco che ci sia un caricatore di stile e un caricatore di css e anche un ExtractTextPlugin, ma da dove proviene l'output? Ho visto che posso var css = require('path/customStyle.css') ma non sembra di vedere dove appare? Lo faccio nel mio file index.jsx. Quindi la domanda il suo: come ottenere questo insieme, che posso fare riferimento al mio customStyle.css. Che cosa ho fatto di sbagliato, o che cosa mi manca Ecco il mio progetto di struttura di cartelle:Webpack css setup e best practice

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

miei webpack.config.js assomiglia a questo

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") 
    ] 
}

di file HTML è simile al seguente:

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

Qualsiasi aiuto con qualche background su come funziona il modo webpack e come ottenere i miei stili sarebbe fantastico.

fonte

2015-02-06 silverfighter

È una domanda vecchia di 2 anni e credo che tu abbia trovato la soluzione. In caso contrario, utilizzare 'extract-text-webpack-plugin',' css-loader', 'html-webpack-plugin' per organizzare i file HTML, JSX, CSS. – SkrewEverything

Il tuo css verrà fornito insieme al file Javascript. Non c'è un file css separato da collegare nel tuo html. È possibile utilizzare il plugin extract-text-webpack per creare un file css separato per la produzione.

Inoltre, si potrebbe voler evitare di inserire URL assoluti nel proprio html. È preferibile utilizzare un modello e fare in modo che Webpack inserisca i tag di script corretti utilizzando il plugin html-webpack. Questo è ciò che il modello potrebbe essere simile (esempio tratto da 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>

suggerisco di dare un'occhiata al kit di avviamento YARSK per vedere come è fatto.

fonte

2015-03-29 16:17:17

html-webpack-plugin può generare index.html per voi. Se hai bisogno di qualcosa di più personalizzato, ti permette di personalizzare il modello che usa. Ho trovato questo plugin molto utile nella pratica.

Vado più nel dettaglio in un mio chapter. Mostra come vari bit si connettono tra loro.

fonte

2015-12-17 09:26:55

Non devi preoccuparti troppo di css con webpack. Tutto ciò di cui ha bisogno è che li trovi con necessità. Più importante è il modo in cui li organizzi nelle cartelle di origine. Abbiamo avuto un grande progetto e dato che con tutti i componenti è diventato piuttosto sparpagliato. Abbiamo deciso di posizionare file di stile comuni in un unico posto e quindi in componenti specifici nella cartella del componente.

fonte

2017-02-25 19:04:44 Janne

Webpack css setup e best practice

risposta

Problemi correlati