私たちのCSSを最小限に抑えるためにwebpackでcss-loaderを使用しようとしました

Question

ダースなどの異なる検索を行い、css-loaderのドキュメントを読もうとしましたが、最新ではないと思います。

私はリアクションコードとフロントエンドのjavascript/jqueryから来る慣習を知りたいので、これは私にとっては新しいものです。

私がしたいことは、私たちのcssをとり、css-loaderを使って最小化することですが、私が読んだことからこれをどうやって行うのか分かりません。

私たちの現在のコードの一部は、このようになります - prod.config.js：

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

import baseConfig from './base.config'; 

const PUBLIC_PATH = '//d1yepz0pwej23y.cloudfront.net/assets/' + process.env.TRAVIS_BUILD_NUMBER + '/'; 

export default { 
    ...baseConfig, 
    output: {...baseConfig.output, publicPath: PUBLIC_PATH }, 
    module: { 
     loaders: [ 
    ...baseConfig.module.loaders, { 
     test: /\.(woff|woff2|eot|ttf|otf|svg)(\?v=[0-9].[0-9].[0-9])?$/, 
     loader: 'file?name=[sha512:hash:base64:7].[ext]', 
     exclude: /node_modules\/(?!font-awesome)/ 
    }, { 
     test: /\.(jpe?g|png|gif|svg)$/, 
     loader: 'file?name=[sha512:hash:base64:7].[ext]!image?optimizationLevel=7&progressive&interlaced', 
     exclude: /node_modules\/(?!font-awesome)/ 
    }, { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss'), 
     exclude: /node_modules/ 
    } 
    ] 
}, 
plugins: [ 
    // extract css 
    new ExtractTextPlugin('[name]-[chunkhash].css'), 

    // set env 
    new webpack.DefinePlugin({ 
    'process.env': { 
     BROWSER: JSON.stringify(true), 
     NODE_ENV: JSON.stringify('production') 
    } 
    }), ... 

    ...baseConfig.plugins 
] 
}; 

は私にこの作業を行う方法についての提案を与えるために、この十分ですか？または、私はどこでもっと情報を得ることができるかを提案しますか？

ドキュメントは、私がこのようなCSSを要求すべきであると言う：（「？！CSS-ローダー最小限./ file.css」） が必要

私が実装するかどうかはわかりません。

ありがとうございます！

更新：

ので@Brandonが言及したのかを試した後、私は実際にcssファイルです必要とすでに我々のエントリにコードを見ました。 が必要です（ '？CSS-ローダは最小限スタイル/ app.css！'）;：

if (process.env.BROWSER) { 
    require('styles/app.css'); 
} 

私がしていることに更新します が、このエラーになってしまった：

ERROR in ./~/css-loader?minimize!./app/styles/app.css 
Module build failed: CssSyntaxError: /css-loader!/Users/homeImac/workspace/node_modules/style-loader/index.js!/Users/homeImac/workspace/node_modules/css-loader/index.js?sourceMap!/Users/homeImac/workspace/node_modules/postcss-loader/index.js!/Users/homeImac/workspace/app/styles/app.css:5:1: Unknown word 

が、その言葉は@importで、このメイクセンスしていますか？もしあなたがこのエラーがなぜ現れているのかを教えてもらえれば、私はそれを感謝します。

もう一度おねがいします！

Answer 1

だから、ローダーの問題を解決するための解決策を見つけようとした後、私は別の解決策を探すことにしました。 「Purify CSS Plugin」というプラグインが答えに終わった。

new PurifyCSSPlugin({ 
    purifyOptions: { info: true, minify: true } 
}) 

「不明な単語」エラーが発生しました。私が試したすべては、未知の言葉をシフトしたり、状況を変えることを何もしなかった。オンラインの皆さんもこの問題を克服できないようでした。

通常、問題を解決する方法は複数あります。

Answer 2

あなたのアプリのJavaScriptソースファイルの1つにrequireステートメントを入れてください。それが「グローバル」なCSSファイルであれば、あなたのアプリケーションのメインエントリーのJSファイルが良い候補です。

app.jsに：

require("css-loader?minimize!./file.css"); // tell webpack about your css dependency so it can load and minimize it