Webpack：CSSを独自のバンドルに展開します

Question

私はプロジェクトでwebpackを使用しています。私はimport "my.css"できるので、スタイルローダーを使用します。

cssはjavascriptにバンドルされており、コンポーネントのマウント時に<style>タグでレンダリングされます。

しかし、私はそのインポート構文を維持し、webpackがすべてのエントリポイントのCSSバンドルを構築したいと考えています。

したがって、webpackの出力は[name].bundle.jsと[name].bundle.cssである必要があります。 これは私が達成できるものですか？このbabel.rcとともに

var config = { 
    entry: { 
    'admin': APP_DIR + '/admin.entry.jsx', 
    'public': APP_DIR + '/public.entry.jsx' 
    }, 
    output: { 
    path: BUILD_DIR, 
    filename: '[name].bundle.js' 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx', '.json'] 
    }, 
    plugins: [], 
    devtool: 'cheap-source-map', 
    module: { 
    loaders: [{ 
     test: /(\/index)?\.jsx?/, 
     include: APP_DIR, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.scss$/, 
     loaders: [ 
      'style-loader', 
      'css-loader', 
      'sass-loader', 
      { 
      loader: 'sass-resources-loader', 
      options: { 
       resources: ['./src/styles/constants.scss'] 
      }, 
      } 
     ] 
     } 
    ], 
    } 
}; 

：

{ 
    "presets" : ["es2015", "react"], 
    "plugins": ["transform-decorators-legacy", "babel-plugin-root-import"] 
} 

Answer 1

はい、あなたはextract-text-webpack-pluginを使用する必要があります。あなたはプロダクション設定だけでそれをやりたいかもしれません。 Configが次のようになります。

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    module: { 
    rules: [ 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      //resolve-url-loader may be chained before sass-loader if necessary 
      use: ['css-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('style.css') 
    //if you want to pass in options, you can do so: 
    //new ExtractTextPlugin({ 
    // filename: 'style.css' 
    //}) 
    ] 
}