最近の webpack.config.js

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const isDevelopment = process.env.NODE_ENV !== 'production';

let config = {
  entry: {
    app: [
      './src/index.jsx',
    ],
  },

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },

      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader',
              options: {
                // modules: true,
                // localIdentName: '[path][name]__[local]--[hash:base64:5]'
              },
            },
          ],
        }),
      },

      {
        test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png$|\.jpg$/,
        loader: 'url-loader',
        options: {
          limit: 1024 * 8,
        },
      },
    ],
  },

  resolve: {
    extensions: ['.js', '.jsx'],
  },

  plugins: [
  ],
};

if (isDevelopment) {
  Object.assign(config, {
    entry: {
      app: [
        // Activate HMR
        'react-hot-loader/patch',
        // Bundle Hot Reloading client (which reloads *only* on success)
        'webpack/hot/only-dev-server',
        ...(config.entry.app)
      ],
    },

    plugins: [
      ...(config.plugins),
      new ExtractTextPlugin({disable: true}),
      new webpack.NamedModulesPlugin(), // dev
      new webpack.HotModuleReplacementPlugin(), // dev
    ],

    devtool: 'cheap-module-eval-source-map',
    devServer: {
      hot: true,
      inline: true,
      contentBase: path.join(__dirname, 'public'),
      publicPath: '/',
    },
  });
} else {
  Object.assign(config, {
    output: {
      ...(config.output),
      path: path.join(__dirname, 'dist'),
    },

    plugins: [
      ...(config.plugins),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production')
      }),
      new ExtractTextPlugin('style.css'),
      // new UglifyJSPlugin(),
      new UglifyJSPlugin({
        uglifyOptions: {
          mangle: false,
          output: {
            comments: false,
            beautify: true,
          },
        },
      }),
    ],
  });
}

module.exports = config;