webpack.config.dev.js

/* eslint-disable global-require */
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const ip = require('ip').address();
const postcssImport = require('postcss-import');
const precss = require('precss');
const postcssClearfix = require('postcss-clearfix');
const postcssCenter = require('postcss-center');
const postcssMath = require('postcss-math');
const autoprefixer = require('autoprefixer');

const useLocalhost = true;

const postCssPlugins = [
  postcssImport,
  precss,
  postcssClearfix,
  postcssCenter,
  // postcssMath,
  autoprefixer({ browsers: ['> 1%'] })
];

module.exports = {
  mode: 'development',
  useLocalhost,
  entry: [
    // 'webpack-hot-middleware/client?reload=true',
    'babel-polyfill',
    `webpack-hot-middleware/client?path=http://${useLocalhost && 'localhost' || ip}:8000/__webpack_hmr`,
    'webpack/hot/only-dev-server',
    'react-hot-loader/patch',
    './app/index',
  ],

  // debug: true,
  devtool: 'cheap-module-eval-source-map',

  output: {
    filename: 'js/[name].[hash].js',
    path: path.join(__dirname, '/dist'),
    sourceMapFilename: 'js/[name].map',
    chunkFilename: 'js/[id].chunk.[hash].js',
    publicPath: `http://${useLocalhost && 'localhost' || ip}:8000/`,
  },

  resolve: {
    modules: [
      path.resolve(__dirname, 'app'),
      'node_modules',
    ],
    extensions: ['.js'],
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'app'),
          path.resolve(__dirname, 'node_modules/react-validation'),
        ],
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        exclude: /\.module\.scss$/,
        use: [
          'babel-loader',
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            ident: 'postcss',
            options: {
              plugins: postCssPlugins,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.module\.css$/,
        use: [
          'babel-loader',
          'classnames-loader',
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: '1',
              localIdentName: '[name]__[local]___[hash:base64:5]',
            }
          },
          {
            loader: 'postcss-loader',
            ident: 'postcss',
            options: {
              plugins: postCssPlugins
            }
          }
        ]
      },
      {
        test: /\.module\.scss$/, 
        use: [
          'babel-loader',
          'classnames-loader',
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            ident: 'postcss',
            options: {
              plugins: postCssPlugins
            }
          },
          'sass-loader',
        ]
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'public/fonts/[name].[hash].[ext]',
            },
          },
        ],
      },
      {
        test: /\.(png|jpg|svg)$/,
        use: 'file-loader',
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
        // exclude: /node_modules\/(?!(moment-timezone)\/).*/,
        exclude: /node_modules/,
        include: __dirname,
      },
    ],
  },

  plugins: [
    // new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './template.ejs',
      inject: 'body',
      favicon: 'favicon.ico',
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      __DEV__: true,
      __TEST__: false,
      __PROD__: false,
      __IP__: JSON.stringify(ip.split('.')),
    }),
  ],
};