添加装载机阵营，Flexbox的网格进Webpack2配置

Question

我试图无休止地为阵营，Flexbox的网格装载机融入我的网络包的配置（如下图所示），但我收到错误：

errors — client:119./~/flexboxgrid/dist/flexboxgrid.css 
Module parse failed: /Users/---project-path---/node_modules/flexboxgrid/dist/flexboxgrid.css Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 

这是我第一次不得不添加类似这样的东西，所以我不确定是否在正确的位置添加了'include：/ flexboxgrid /'（我在开发/生产规则中添加了它），但是它只是返回相同的错误！显然，我所做的是错误的。

ps。我使用的反应 - 终极版 - webpack2-样板

const webpack = require('webpack'); 
const path = require('path'); 

const DashboardPlugin = require('webpack-dashboard/plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

const nodeEnv = process.env.NODE_ENV || 'development'; 
const isProduction = nodeEnv === 'production'; 

const jsSourcePath = path.join(__dirname, './source'); 
const buildPath = path.join(__dirname, './build'); 
const imgPath = path.join(__dirname, './source/assets/img'); 
const sourcePath = path.join(__dirname, './source'); 
if (process.env.NODE_ENV == "production") { 
    var env = JSON.stringify(require("./production-env.js")); 
} else { 
    var env = JSON.stringify(require("./development-env.js")); 
} 

// Common plugins 
const plugins = [ 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor', 
    minChunks: Infinity, 
    filename: 'vendor-[hash].js', 
    }), 
    new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: JSON.stringify(nodeEnv), 
     APPDATA: env, 
    }, 
    }), 
    new webpack.NamedModulesPlugin(), 
    new HtmlWebpackPlugin({ 
    template: path.join(sourcePath, 'index.html'), 
    path: buildPath, 
    filename: 'index.html', 
    }), 
    new webpack.LoaderOptionsPlugin({ 
    options: { 
     postcss: [ 
     autoprefixer({ 
      browsers: [ 
      'last 3 version', 
      'ie >= 10', 
      ], 
     }), 
     ], 
     context: sourcePath, 
    }, 
    }), 
]; 

// Common rules 
const rules = [{ 
    test: /\.(js|jsx)$/, 
    exclude: /node_modules/, 
    use: [ 
     'babel-loader', 
    ], 
    }, 
    { 
    test: /\.(png|gif|jpg|svg)$/, 
    include: imgPath, 
    use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]', 
    }, 
]; 

if (isProduction) { 
    // Production plugins 
    plugins.push(
    new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
     debug: false, 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false, 
     screw_ie8: true, 
     conditionals: true, 
     unused: true, 
     comparisons: true, 
     sequences: true, 
     dead_code: true, 
     evaluate: true, 
     if_return: true, 
     join_vars: true, 
     }, 
     output: { 
     comments: false, 
     }, 
    }), 
    new ExtractTextPlugin('style-[hash].css') 
); 

    // Production rules 
    rules.push({ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: 'css-loader!postcss-loader!sass-loader', 
    }), 

    }); 
} else { 
    // Development plugins 
    plugins.push(
    new webpack.HotModuleReplacementPlugin(), 
    new DashboardPlugin() 
); 

    // Development rules 
    rules.push({ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    use: [ 
     'style-loader', 
     // Using source maps breaks urls in the CSS loader 
     // https://github.com/webpack/css-loader/issues/232 
     // This comment solves it, but breaks testing from a local network 
     // https://github.com/webpack/css-loader/issues/232#issuecomment-240449998 
     // 'css-loader?sourceMap', 
     'css-loader', 
     'postcss-loader', 
     'sass-loader?sourceMap', 
    ], 

    }); 
} 

module.exports = { 
    devtool: isProduction ? 'eval' : 'source-map', 
    context: jsSourcePath, 
    entry: { 
    js: './index.js', 
    vendor: [ 
     'babel-polyfill', 
     'es6-promise', 
     'immutable', 
     'isomorphic-fetch', 
     'react-dom', 
     'react-redux', 
     'react-router', 
     'react', 
     'redux-thunk', 
     'redux', 
    ], 
    }, 
    output: { 
    path: buildPath, 
    publicPath: '/', 
    filename: 'app-[hash].js', 
    }, 
    module: { 
    rules, 
    }, 
    resolve: { 
    extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'], 
    modules: [ 
     path.resolve(__dirname, 'node_modules'), 
     jsSourcePath, 
    ], 
    }, 
    plugins, 
    devServer: { 
    contentBase: isProduction ? './build' : './source', 
    historyApiFallback: true, 
    port: 3000, 
    compress: isProduction, 
    inline: !isProduction, 
    hot: !isProduction, 
    host: '0.0.0.0', 
    stats: { 
     assets: true, 
     children: false, 
     chunks: false, 
     hash: false, 
     modules: false, 
     publicPath: false, 
     timings: true, 
     version: false, 
     warnings: true, 
     colors: { 
     green: '\u001b[32m', 
     }, 
    }, 
    }, 
}; 

Answer 1

其更好地转换类properties.This样的装载机将有助于解决这一

 { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
     } 
     }