webpack.config.js

const path = require('path');
const webpack = require('webpack');
const StatsPlugin = require('stats-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const devServerPort = 3808;
const production = process.env.NODE_ENV === 'production';
const root = process.cwd();
if (!production) {
  // Не должно выполняться при запуске через `docker-compose up --build`
  const dotenv = require('dotenv');
  // Именно в таком порядке - dotenv не перезаписывает уже установленные переменные
  dotenv.config({ path: '../.env.local' });
  dotenv.config({ path: '../.env' });
}
const config = {
  entry: {
    application: path.join(root, 'app', 'clientGlobals.js'),
    vendor: [
      'react', 'react-dom', 'react-on-rails', 'redux', 'react-redux', 'react-select', 'react-autocomplete', 'formsy-react',
      'react-router', 'konva', 'lodash', 'moment', 'babel-polyfill', 'rc-slider', 'react-widgets', 'recharts',
      'react-dates', 'react-paginate',
    ],
  },
  output: {
    path: path.join(root, '..', 'public', 'assets'),
    publicPath: '/assets/',
    filename: production ? '[name]-[chunkhash:8].js' : '[name].js',
  },
  resolve: {
    modules: [
      root,
      'node_modules',
    ],
    extensions: ['.js', '.jsx'],
    alias: {
      styles: 'styles',
      images: 'images',
      icons: 'images/icons',
      api: 'app/api',
      actions: 'app/actions',
      components: 'app/components',
      pages: 'app/pages',
      common: 'app/components/common',
      formsy: 'app/components/common/form/formsy',
      layout: 'app/components/layout',
      containers: 'app/containers',
      constants: 'app/constants',
      store: 'app/store',
      reducers: 'app/reducers',
      utils: 'app/utils',
      operator: 'app/operator',
      admin: 'app/admin',
    },
  },
  plugins: [
    new StatsPlugin('manifest.json', {
      chunkModules: false,
      source: false,
      chunks: false,
      modules: false,
      assets: true,
    }),
    new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(production ? 'production' : '') } }),
    new ExtractTextPlugin({ filename: production ? '[name]-[chunkhash].css' : '[name].css' }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: { loader: 'babel-loader', options: { cacheDirectory: true } },
        include: [
          path.resolve(__dirname, 'node_modules/punycode'),
          path.resolve(__dirname, 'app'),
        ],
      },
      {
        test: /\.svg$/,
        use: `svg-sprite-loader?${JSON.stringify({
          name: '[name]',
          prefixize: true,
          esModule: false,
        })}`,
      },
      {
        test: /\.(jpe?g|ico|png|gif|woff|woff2|ttf|eot?)$/i,
        use: `file-loader?name=${production ? '[name]-[hash:8].[ext]' : '[name].[ext]'}`,
      },
      {
        test: /\.(scss|sass)$/,
        use: (production)
          ? ExtractTextPlugin.extract({
            use: [
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  plugins: () => [
                    require('autoprefixer')({ browsers: ['last 20 versions'] }),
                    require('postcss-clean')(),
                  ],
                },
              },
              'sass-loader'],
          })
          : ['style-loader', 'css-loader', 'sass-loader'],
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ],
  },
};

if (production) {
  config.plugins.push(
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
  );
} else {
  config.devServer = {
    port: devServerPort,
    headers: { 'Access-Control-Allow-Origin': '*' },
    disableHostCheck: true,
    hot: true,
    inline: true,
  };
  config.output.publicPath = `http://webpack:${devServerPort}/assets/`;
  config.devtool = 'eval-cheap-module-source-map';
  config.plugins.push(
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  );
}
module.exports = config;