のWebPACKは

Question

のWebPACKが大きすぎるファイル
WebPACKの2.xの
WebPACKの専門家を生成し、大きなファイルを生成し、私は今、私は

import 'bootstrap/dist/css/bootstrap-theme.min.css'; 
import 'bootstrap-select/dist/css/bootstrap-select.min.css'; 
import 'bootstrap-multiselect/dist/css/bootstrap-multiselect.css'; 
import 'font-awesome/css/font-awesome.min.css'; 
import 'angular-ui-notification/dist/angular-ui-notification.min.css'; 
import 'slick-carousel/slick/slick.css'; 
import 'slick-carousel/slick/slick-theme.css'; 

import '../css/styles.css'; 
import '../css/custom.css'; 
import '../css/max-width_767.css'; 

WebPACKのコンフィグ

を含める方法 jsファイル
で cssを接続したいです

var glob = require('glob'), 
    ngAnnotate = require('ng-annotate-webpack-plugin'), 
    ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: __dirname + '/application/application.js', 
    output: { 
     path: __dirname + '/build', 
     filename: 'bundle.js' 
    }, 
    plugins: [ 
     new ngAnnotate({ 
      add: true, 
     }), 
     new ExtractTextPlugin({ 
      filename: '[name].css', 
     }) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['babel-preset-es2015'].map(require.resolve) 
       }, 
       exclude: /(node_modules|bower_components)/ 
      }, 
      { 
       test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'url-loader' 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader' 
      } 
     ] 
    }, 
    node: { 
     fs: 'empty' 
    } 
}; 

私は途方に暮れていますが、巨大なbundle.jsファイルはおそらく5 MBです。 ONT、写真など

bundle.js 5.53 MB 0 [emitted] [big] main

は、私はちょうど私が間違って何をやっているbundle.css

にのみcssと出力を連結したいですか？

Answer 1

それが答えだが
limit

var glob = require('glob'), 
    ngAnnotate = require('ng-annotate-webpack-plugin'), 
    ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: __dirname + '/application/application.js', 
    output: { 
     path: __dirname + '/build', 
     filename: 'bundle.js' 
    }, 
    plugins: [ 
     new ngAnnotate({ 
      add: true, 
     }), 
     new ExtractTextPlugin('bundle.css'), 
    ], 
    resolve: { 
     alias: { 
      moment: __dirname + '/node_modules/moment/min/moment' 
     }, 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['babel-preset-es2015'].map(require.resolve) 
       }, 
       exclude: /(node_modules|bower_components)/ 
      }, 
      { 
       test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'url-loader', 
       options: { 
        limit: 1000 
       } 
      }, 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: 'css-loader' 
       }) 
      } 
     ] 
    }, 
    node: { 
     fs: 'empty' 
    }, 
    devServer: { 
     historyApiFallback: true 
    } 
}; 

Answer 2

extract-text-pluginが含まれていますが、実際には使用していないようです。ここ

変更：

{ 
    test: /\.css$/, 
    loader: 'style-loader!css-loader' 
} 

のようなものに：

{ 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract({ 
     fallbackLoader: "style-loader", 
     loader: "css-loader" 
    }) 
    }