WebpackがCSSファイルを無視するのはなぜですか？

Question

私はCSSファイル（PostCSSを使用）を別のファイルにコンパイルするためにwebpackを取得しようとしています。ドキュメントから、これはExtractTextPluginがすべきことであるようです。しかし、CSSファイルを使ってwebpackに何もしないようにすることはできません。

関連プロジェクト構造：

dist 
⎣js 
    ⎣bundle.js 
public 
⎣css 
    ⎣style.css* 
src 
⎣css 
    ⎣index.css 

* file doesn’t exist (hasn’t been created) 

webpack.config.babel.js

import webpack from 'webpack'; 
import path from 'path'; 

import ExtractTextPlugin from 'extract-text-webpack-plugin'; 

import { WDS_PORT } from './src/shared/config'; 
import { isProd } from './src/shared/util'; 

export default { 
    entry: [ 
    'react-hot-loader/patch', 
    './src/client', 
    ], 
    output: { 
    filename: 'js/bundle.js', 
    path: path.resolve(__dirname, 'dist'), 
    publicPath: isProd ? '/static/' : `http://localhost:${ WDS_PORT }/dist/`, 
    }, 
    module: { 
    rules: [ 
     { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      { 
       loader: 'style-loader', 
      }, 
      { 
       loader: 'css-loader', 
       options: { 
       sourceMap: true, 
       importLoaders: 1, 
       }, 
      }, 
      { 
       loader: 'postcss-loader', 
       options: { 
       sourceMap: 'inline', 
       }, 
      }, 
      ], 
     }), 
     }, 
    ], 
    }, 
    devtool: isProd ? false : 'source-map', 
    resolve: { 
    extensions: ['.js', '.jsx', '.css'], 
    }, 
    devServer: { 
    port: WDS_PORT, 
    hot: true, 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new ExtractTextPlugin('./public/css/style.css'), 
    ], 
}; 

これは楽しそうに正しく私のJavaScriptをコンパイルしますが、それは私のCSSには全く何もしません。何がうまくいかず、どのように修正するのですか？

Answer 1

Webpackは、ある時点でインポートされているファイルのみを処理します。これは、エントリポイントとして指定されるか、エントリポイントから参照される任意のファイルにインポートされます。ルールはファイルをインポートしません。インポートがテストに合格するたびに適用されます（ケースの正規表現に一致します）。

他のモジュールと同じようにCSSをインポートする必要があります。

import './css/index.css'; 

Code Splitting - CSSも参照してください。