webpack-config

webpack-config.js

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const BundleTracker = require('webpack-bundle-tracker');


const ENV_VARS = {
  staging: {
    publicPath: 'https://flash-staging.s3.amazonaws.com',
    fileName: './webpack-stats.staging.json',
  },
  production: {
    publicPath: 'https://d2li6e5dkf687u.cloudfront.net',
    fileName: './webpack-stats.production.json',
  },
};

const extractTextPlugin = new ExtractTextPlugin({ filename: 'belong-[chunkhash].min.css', allChunks: true });

module.exports = {
  cache: true,
  entry: {
    build: ['./flash/ver_static/js/react/app.js'],
    vendor: ['react', 'lodash', 'moment', 'react-router', 'redux', 'react-redux', 'react-router-redux', 'redux-thunk'],
  },
  output: {
    filename: '[name]-[chunkhash].min.js',
    path: path.resolve(__dirname, './flash/ver_static'),
    publicPath: `${ENV_VARS[process.env.SYS_ENV].publicPath}/static/`,
    sourceMapFilename: '[file].map',
  },
  devtool: 'source-map',
  resolveLoader: {
    moduleExtensions: ['-loader'],
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|.\/flash\/ver_static\/js\/libs\/)/,
      loader: 'babel',
      query: {
        plugins: [
          'transform-runtime',
          'transform-react-remove-prop-types',
          'add-react-displayname',
        ],
        presets: [['es2015', { modules: false }], 'stage-0', 'react'],
      },
    }, {
      test: /\.scss$/,
      exclude: /(node_modules|bower_components)/,
      use: extractTextPlugin.extract({
        fallback: 'style',
        use: [
          {
            loader: 'css?minimize',
          },
          {
            loader: 'postcss',
            options: {
              plugins: [autoprefixer({ browsers: ['> 1%', 'last 2 versions'] })],
            },
          },
          {
            loader: 'sass',
            options: {
              outputStyle: 'compressed',
            },
          },
        ],
      }),
    }],
    noParse: /node_modules\/quill\/dist/,
  },
  externals: {
    jquery: 'jQuery',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
    new BundleAnalyzerPlugin({ analyzerMode: 'static' }),
    new WebpackMd5Hash(),
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor-[hash].min.js' }),
    new webpack.optimize.UglifyJsPlugin({ minimize: true, sourceMap: true, compress: { warnings: false, drop_console: false } }),
    extractTextPlugin,
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
    new BundleTracker({ filename: ENV_VARS[process.env.SYS_ENV].fileName }),
    function ExitFailedBuildProcess() {
      this.plugin('done', (stats) => {
        if (
          stats.compilation.errors &&
          stats.compilation.errors.length &&
          process.argv.indexOf('--watch') === -1
        ) {
          process.exit(1);
        }
      });
    },
  ],
};