如何從js包中刪除css？

Question

我想創建反應的組分保持JS和CSS在同一文件夾（對於每個分量）：

• 對話框
  • Container.jsx
  • Presentation.jsx
  • styles.less

這是我的webpack con的一部分圖：

module: { 
    loaders: [ 
     { 
      test: /\.(js|jsx)$/, 
      loader: 'babel', 
      exclude: /(node_modules)/, 
      query: { 
       presets: [ 
        ['react'], 
        ['es2015'], 
        ['stage-0'] 
       ], 
       plugins: [ 
        ['transform-decorators-legacy'], 
        ['transform-runtime'], 
        ['transform-react-remove-prop-types'], 
        ['transform-react-constant-elements'], 
        ['transform-react-inline-elements'] 
       ] 
      } 
     }, 
     { 
      test: /\.less$/, 
      loader: ExtractTextPlugin.extract(['css-loader', 'less-loader']), 
     } 
    ], 
}, 
plugins: [ 
    new webpack.NoEmitOnErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': '"production"' 
    }), 
    new webpack.ProvidePlugin({ 
     'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     beautify: false, 
     comments: false, 
     sourceMap: true, 
     compress: { 
      sequences: true, 
      booleans: true, 
      loops: true, 
      unused: true, 
      warnings: false, 
      drop_console: true, 
      unsafe: true 
     } 
    }), 
    new ExtractTextPlugin({ 
     filename: 'bundle.css', 
     allChunks: true 
    }), 
    new OptimizeCssAssetsPlugin({ 
     assetNameRegExp: /\.css$/g, 
     cssProcessor: require('cssnano'), 
     cssProcessorOptions: { 
      discardComments: { 
       removeAll: true 
      } 
     }, 
     canPrint: true 
    }) 
], 

的WebPack創建bundle.js + bundle.css文件。我會說它除了一會兒之外按預期工作。我發現bundle.js包含來自bundle.css的css。

例如，如果bundle.css的大小是50KB，那麼bundle.js =自己的大小+ 50KB。

我不需要在我的js包中重複使用css代碼。那麼如何解決它？

Answer 1

固定當我從laravel-elixir-webpack-official切換到本地webpack（webpack流）