2017-04-11 73 views
0

我想讓webpack將我的CSS文件(使用PostCSS)編譯爲一個單獨的文件。從文檔看來,這看起來正是ExtractTextPlugin應該做的。但是,我無法讓webpack根據我的CSS文件做任何事情。爲什麼Webpack會忽略我的CSS文件?

相關的項目結構:

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。怎麼回事,我該如何解決?

+0

另外值得注意的是:如果我將postCSS從等式中刪除,並且只有'use:'css-loader'',它仍然不會執行任何操作。 – futuraprime

+0

您是否在從shell運行webpack時檢查輸出? – Sebastianb

回答

1

Webpack僅處理某些時刻正在導入的文件。這或者被指定爲入口點或者被導入從入口點引用的任何文件中。這些規則不會導入任何文件,只要導入通過測試(與您的案例中的正則表達式匹配)就可以應用它們。

你需要導入你的CSS就像任何其他模塊。

import './css/index.css'; 

另請參閱Code Splitting - CSS