如何从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流）