webpack.config.js

const webpack = require('webpack');
const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const HtmlWebpack = require('html-webpack-plugin');
const HtmlWebpackAssetsPlugin = require('html-webpack-include-assets-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const AssetsPlugin = require('assets-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin')

const BUILD_DIRECTORY = 'src';
const BUILD_DROP_PATH = path.resolve(__dirname, BUILD_DIRECTORY);
const PUBLIC_DIRECTORY = 'dist';
const PUBLIC_PATH = path.resolve(__dirname, PUBLIC_DIRECTORY);
const ENVCONFIG = require('./appsettings.json');

// TODO: https://webpack.js.org/guides/production-build/
process.traceDeprecation = true;
const defaultConfig = {
  context: BUILD_DROP_PATH,
  entry: {
    app: [
    //  'babel-polyfill',
      './app.js'
    ]
  },
  externals: {
    $: '$',
    env: process.env.NODE_ENV
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      options: {
        presets: [
          // ['env', {
          //   // production: {
          //   //   presets: [
          //   //     'minify'
          //   //   ],
          //   // },
          //   // debug: true,
          //   // 'targets': {
          //   //   'chrome': 40
          //   // },
          //   modules: false,
          //   spec: false,
          // }],
          'stage-0',
          'react',
        ],
        plugins: [
          'react-hot-loader/babel',
          'transform-class-properties',
          'lodash'
        ]
      }
    },  {
      test: /\.s?css$/,
      use: [
        {
          loader:'style-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader:'css-loader',
          options: {
            importLoaders: 1,
            sourceMap: true
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true,
            plugins: () => [
              require('postcss-smart-import'),
              require('precss'),
              require('autoprefixer')({
                browsers: 'chrome 40'
              }),
              require('postcss-reporter'),
            ]
          }
        }
      ]
    }, {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff'
    }, {
      test: /\.(ttf|eot|svg|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'file-loader'
    }]
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NamedModulesPlugin(),
    new LodashModuleReplacementPlugin,
    new WebpackNotifierPlugin(),
    new Visualizer(),
  ],
  resolve: {
    alias: {
      actions: path.resolve(__dirname, './src/actions'),
      components: path.resolve(__dirname, './src/components/'),
      componentStyles: path.resolve(__dirname, './src/styles/'),
      containers: path.resolve(__dirname, './src/containers/'),
      helpers: path.resolve(__dirname, './src/helpers/'),
      reducers: path.resolve(__dirname, './src/reducers'),
    }
  },
};

//const [poly, ...otherEntries] = defaultConfig.entry.app;

const developmentConfig = {
  devServer: {
    contentBase: [BUILD_DROP_PATH, PUBLIC_PATH],
    historyApiFallback: true,
    hot: true,
    noInfo: false,
  },
  devtool: 'inline-source-map',
  externals: {
    ...defaultConfig.externals,
    envConfig: JSON.stringify(ENVCONFIG),
  },
  entry: {
    app: ['react-hot-loader/patch'].concat(defaultConfig.entry.app),
    // app: Object.assign([], [poly])
    //   .concat(['react-hot-loader/patch'])
    //   .concat(otherEntries),
    todos: 'helpers/todos'
  },
  output: {
    filename: '[name].bundle.js',
    publicPath: '/',
    path: PUBLIC_PATH,
  },
  plugins: defaultConfig.plugins.concat(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      env: JSON.stringify('development')
    }),
    new HtmlWebpack({
      filename: 'index.html',
      inject: true,
      showErrors: true,
      template: BUILD_DROP_PATH + '/index.html',
    }),
//     new HtmlWebpackAssetsPlugin({
//       assets: [
//         `${MAPCONFIG.MapClientConfig.tmapUrl}/js/mapPlugin.bundle.js`,
//       ],
//       append: false,
//       jsExtensions: ['.js', ''],
//       publicPath: false
//     })
  ),
  watch: true
};

const productionConfig = {
  externals: {
    ...defaultConfig.externals,
    envConfig: 'envConfig',
  },
  output: {
    filename: '[name].[hash].bundle.js',
    path: PUBLIC_PATH,
  },
  plugins: defaultConfig.plugins.concat(
    new AssetsPlugin({
      filename: 'webpack.assets.json',
      path: PUBLIC_PATH,
      prettyPrint: true
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      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
      },
      mangle: true,
      minimize: true,
      output: {
        comments: false
      },
      sourceMap: true,
      warnings:'verbose'
    })
  )
};

/*
const developmentConfig = {
  context: path.resolve(__dirname, 'src'),
  devServer: {
    //hot: true
    //contentBase: path.join(__dirname, './dist'),
  },
  entry: {
    app: './app.js',
    //'webpack/hot/dev-server'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: [{
        loader: 'babel-loader',
        options: {
          presets: [
            ['es2015', { modules: false }]
          ]
        },
      }]
    },{
      test: /\.s?css$/,
      loader: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    }]
  },
  devtool: 'inline-source-map',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('precss'),
          require('autoprefixer')({
            browsers: 'last 2 versions'
          }),
          // use with posthtml
          // require('postcss-modules')({
          //   generateScopedName: function(name, filename, css) {
          //     let i  = css.indexOf('.' + name),
          //       line = css.substr(0, i).split(/[\r\n]/).length,
          //       file = path.basename(filename, '.scss');
          //     return '_' + file + '_' + line + '-' + name;
          //   }
          // }),
          //require('postcss-reporter'),
        ]
      }
    }),
    new HtmlWebpack({
      template: path.join(__dirname, 'index.html'),
      filename: 'index.html',
      inject: 'body', // inject at the bottom of the body tag
    }),
  ],
  watch: true,
};
*/

module.exports = env => {
  console.log(env, 'environment');
  return Object.assign( {}, defaultConfig,
                        env == 'production' ?
                          productionConfig :
                          developmentConfig
  );
};