1

webpackと を使用して、複数のエントリを持つ React アプリケーションを作成しようとしていますextract-text-webpack-plugin。

私の設定ファイルは次のようになります。

const commonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const extractTextPlugin = require('extract-text-webpack-plugin');

let config = {
  entry: {
    app: './client/app.entry.js',
    signIn: './client/sign-in.entry.js',
  },
  output: {
    path: './server/public',
    filename: '[name].js'
  },

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /\.css$/,
        loader: extractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
      }
    ]
  },

  resolve: {
    modulesDirectories: ['node_modules', 'client'],
    extensions: ['', '.js']
  },

  plugins: [
    new commonsChunkPlugin('common', 'common.js'),
    new extractTextPlugin('styles.css', { allChunks: true })
  ]
};

module.exports = config;

私の問題はextract-text-webpack-plugin、エントリ チャンクのサブモジュールからではなく、エントリ チャンクからインポートされた css ファイルのみが含まれていることです。

だからもしapp.entry.js持っているなら

import "./app-style.css";
import "./sub-module"; // This module has import "./sub-style.css";

のスタイルapp-style.cssはバンドルされますが、 のスタイルはバンドルされませんsub-style.css。

エントリ ファイルが 1 つしかないときは、この問題は発生したことがないので、複数のエントリを作成するには別の設定が必要になるのでしょうか?

考慮すべきことは、使用方法による CSSModules の使用ですcss-loader。これも要因になる可能性があります。

何か案は？

4

1 に答える 1

1

私は同様の問題を解決しようとしていますが、同じ質問を持つ人のために解決策と考えを文書化することは良い考えだと思います.

TextExtract プラグインは、commonchunks プラグインで構成する必要があるチャンクで動作し、チャンク サポートを有効にします。

// Configuration of the extract plugin with chunks and naming
new ExtractTextPlugin("[name].css", {  allChunks: true })

すべてです) 次は、チャンクの構成です (webpack は非常に柔軟なツールであり、誰もが独自のニーズに合わせて構成します。例として、「vendour.css」と「application.css」のビルド構成に基づいて構成する方法を示します。 「輸入」）

// Vendour chunks definition for vendor css
entry: {
  vendor : ['./css/vendour.sass']

エントリポイント file.js の例

import "./css/vendor.sass"
import "./css/application.sass"

ビルド後、webpack は vendor.css (ベンダーのものを でエクスポートする場所@import "~vendormodules/sass/alla") と application.css ファイルを作成します。

ありがとう、

于 2016-04-27T11:12:09.327 に答える