webpack config

gistfile1.txt

ModuleParseError: Module parse failed: /Users/gramesh/Documents/projects/start-page-nodejs/restaurant-profile/src/components/button/index.js Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
| export default function Button(props) {
|   return (
|     <button type='button' className={styles.button}>{props.children}</button>
|   );
| }

babelrc
{
  "plugins": ["transform-class-properties"],
  "presets": [
    "react",
    [
      "env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "env": {
    "client": {
      "plugins": ["transform-class-properties"],
      "presets": [
        "react",
        [
          "env",
          {
            "targets": {
              "forceAllTransforms": true
            }
          }
        ]
      ]
    }
  }
}


import path from 'path';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import Merge from 'webpack-merge';
import WebpackShellPlugin from 'webpack-shell-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';

// because startpages config likes to gunk with environment variables we need to duplicate it.
// this was done because postcss loader was setting NODE_ENV as well to 'development' for us by default.
process.env.NODE_ENV = process.env.NODE_ENV || 'dev';

let commonConfig = {
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin({
      filename: 'assets/rp/index.css',
      allChunks: true,
      // import order doesn't matter for us in CSS Modules
      ignoreOrder: true
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        loader: 'svg-react-loader'
      },
      {
        test: /\.(png|jpe?g)$/i,
        loaders: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'assets/rp/img/'
            }
          },
          {
            loader: 'image-webpack-loader',
            query: {
              progressive: true,
              optimizationLevel: 7,
              pngquant: {
                quality: '65-90',
                speed: 4
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                localIdentName: '[hash:8]',
                modules: true,
                importLoaders: 1,
                sourceMap: true,
                camelCase: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                config: {
                  path: path.resolve('config/', 'postcss.config.js')
                }
              }
            }
          ]
        })
      }
    ]
  }
};

let serverConfig = {
  entry: {
    index: './src/server/index.js'
  },
  target: 'node',
  output: {
    libraryTarget: 'commonjs',
    path: path.resolve('dist'),
    filename: 'node/[name].js'
  },
  plugins: [
    new CopyWebpackPlugin([ { from: 'src/loader.js', to: 'loader.js' } ])
  ]
};

let clientConfig = {
  entry: {
    index: './src/client/index.js'
  },
  target: 'web',
  output: {
    libraryTarget: 'window',
    path: path.resolve('dist'),
    filename: 'assets/rp/[name].js',
  }
};

// keys here should match the `env` values provided in .babelrc
let config = {
  client: clientConfig
};

export default function(env) {
  if(process.env.WATCH) {
    const watchConfig = {
      watch: true,
      plugins: [
        new WebpackShellPlugin({
          onBuildEnd:['node ../app.js'],
          dev: true, //only run scripts one time -- ie so we dont start multiple servers on watches
        })
      ]
    };

    serverConfig = Merge(serverConfig, watchConfig);
  };

  if(process.env.TEST) {
    const watchConfig = {
      watch: true,
      plugins: [
        new WebpackShellPlugin({
          onBuildEnd:['node test/server'],
          dev: true, //only run scripts one time -- ie so we dont start multiple servers on watches
        })
      ]
    };

    serverConfig = Merge(serverConfig, watchConfig);
  };

  // if no BABEL_ENV is provided, return webpack server config with babel root env
  if (!process.env.BABEL_ENV) {
    return Merge(commonConfig, serverConfig);
  }

  // if BABEL_ENV is provided, but not valid or in `watch` mode, return webpack config for all the targets with default/root babel config
  if (!config[process.env.BABEL_ENV] || process.env.BABEL_ENV === 'watch') {
    return [
      Merge(commonConfig, serverConfig),
      Merge(commonConfig, clientConfig)
    ]
  }

  // if a valid BABEL_ENV is provided, just return the webpack config, with the corresponding babel env
  return Merge(commonConfig, config[process.env.BABEL_ENV]);
}