3

私の webpack config で style-loader と css-loader を使用すると、以下は私の webpack.config.js からの抜粋です

var wpconfig = {
    devtool: "source-map",
    entry : [
        './src/client/index.js'
    ]
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/assets/'
    },
    module:{
        loaders:[
            { test: /\.(jpg|gif)$/, loader: 'url-loader?limit=10000'},
            { test: /\.css$/, loader: 'style-loader!css-loader'   }

        ]
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

module.exports = wpconfig ;

JS が無効になっている場合、スタイルがドキュメントに書き込まれていない<head>ため、ページがプレーン テキストとしてレンダリングされていることがわかります。

掘り下げてみると、 extract-text-webpack-pluginについて聞いたことがあり、構成を少し変更することで *.css ファイルを 1 つにまとめapp.cssて効果的に読み込むことができました。

質問 ：

  • JS が無効になっている場合、style-loader または css-loader のいずれかがスタイル チャンクを先頭に書き込むことができないと想定するのは正しいですか?
  • このシナリオでは、extract-text-webpack-plugin を使用することは有効な解決策ですか?
  • そのようなシナリオで CSS をロードする他の方法はありますか?

PS : webpack から始めたばかりなので、 webpack.config.js に明らかな問題がある場合は指摘してください。

4

1 に答える 1

2

本番環境で ExtractTextPlugin を使用することは実際に有効なソリューションであるため、チャンクが必要ない場合は問題ありません。また、CSS の最適な縮小も可能です。

私は個人的に、運用環境では ExtractText を使用し、開発環境では生のスタイル ローダーを使用しています。

于 2016-05-17T11:46:05.283 に答える