6

私はwebpackが初めてで、reactjsで使用したいのですが、今は混乱しています。webpackを使ったクライアントサイトの開発工程でcssがどのように扱われているか知りたいです。webpack がすべての js をバンドルし、bundle.js としてリンクしていることを知っています。これ<script src="http://localhost:3000/assets/bundle.js"></script>は、webpack-dev-server の構成に基づいて、html ファイルで参照します。今、私はcssファイルも持っています。これはどこに行くのですか？私のhtmlファイルでこれを参照するための私のURLは何でしょうか。style-loader と css-loader と ExtractTextPlugin があることは理解していますが、出力はどこに属しますか? できることがわかりましたvar css = require('path/customStyle.css')しかし、それが表示される場所が見えないようですか？これは index.jsx ファイルで行います。だから彼の質問：これをまとめる方法、私のcustomStyle.cssを参照できること。私は何を間違っていますか、または私は何を見逃していますか これが私のプロジェクトフォルダ構造です:

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

私のwebpack.config.jsは次のようになります

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 ファイルは次のようになります。

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

webpack の方法がどのように機能するか、および私のスタイルをどのように取り込むかについての背景についての助けは素晴らしいでしょう.

4

3 に答える 3

4

CSS は Javascript ファイルと一緒にバンドルされます。html にリンクする個別の css ファイルはありません。extract-text-webpack-plugin を使用して、本番用に個別の css ファイルを作成できます。

また、html に絶対 URL を入れないようにすることもできます。テンプレートをより適切に使用し、html-webpack-plugin を使用して webpack に適切なスクリプト タグを挿入させます。テンプレートは次のようになります (例は 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>

YARSKスターターキットを見て、それがどのように行われたかを確認することをお勧めします.

于 2015-03-29T16:17:17.347 に答える
2

html-webpack-pluginはindex.htmlを生成できます。さらにカスタムが必要な場合は、使用するテンプレートをカスタマイズできます。このプラグインは実際に非常に役立つことがわかりました。

私は私の章でより詳細に説明します。さまざまなビットが互いにどのように接続されているかを示しています。

于 2015-12-17T09:26:55.013 に答える
0

webpack を使用すると、css についてそれほど気にする必要はありません。必要なのは、require でそれらを見つけることだけです。さらに重要なのは、ソース フォルダーでそれらを整理する方法です。私たちは大規模なプロジェクトを抱えていたので、すべてのコンポーネントが散らばっていました。共通のスタイル ファイルを 1 か所に配置してから、コンポーネント フォルダーの下にコンポーネント固有のものを配置することにしました。

于 2017-02-25T19:04:44.140 に答える