Webpack 3 config for React Project

install.sh

npm -g remove webpack;
npm -g install webpack;
yarn add html-webpack-plugin extract-text-webpack-plugin babel-loader file-loader css-loader style-loader postcss-loader sass-loader 

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

webpack.config.js

// Reference https://stanko.github.io/webpack-babel-react-revisited/
// We are using node's native package 'path'
// https://nodejs.org/api/path.html
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Constant with our paths
// if resolve failed, use join
const paths = {
  DIST: path.resolve(__dirname, 'dist'),
  SRC: path.resolve(__dirname, 'src'),
  JS: path.resolve(__dirname, 'src/js'),
};
// file constant
const ENTRY = path.join(paths.JS, 'app.js');
const HTML_TEMPLATE = path.join(paths.SRC, 'index.html');
const CSS_FILE = 'style.css';
const OUTPUT = {
    path: paths.DIST,
    filename: 'bundle.js',
};

// Webpack configuration
module.exports = {
  entry: ENTRY,
  output: OUTPUT ,
  // comment the unused plugin
  plugins: [
    // Tell webpack to use html plugin to generate html file from react
    new HtmlWebpackPlugin({
      template: HTML_TEMPLATE,
    }),
    // Write Generated CSS output
    new ExtractTextPlugin({
      path: paths.DIST,
      filename: CSS_FILE,
      disable: process.env.NODE_ENV === "development", //for faster reload in dev, comment if you prefer more control on putput
    }), //plugin accept: (config) object, (relative path) string.
  ],
  // Loaders configuration
  // We are telling webpack to use "babel-loader" for .js and .jsx files
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ],
      },
      // CSS loader for CSS files + SASS Preprocessing
      // Files will get handled by css loader and then passed to the extract text plugin
      // which will write it to the file we defined above
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            use: [
              { loader: 'css-loader', options: { importLoaders: 1 } },
              { loader: 'postcss-loader' },
              { loader: 'sass-loader' }
            ],
            // use style-loader in development
            fallback: 'style-loader', 
          }),
      },
      // File loader for image assets -> ADDED IN THIS STEP
      // We'll add only image extensions, but you can things like svgs, fonts and videos
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
    ],
  },
  // Enable importing JS files without specifying their's extenstion
  //
  // So we can write:
  // import MyComponent from './my-component';
  //
  // Instead of:
  // import MyComponent from './my-component.jsx';
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  //webpack 3 resolve
  resolveLoader: {
      modules: ['node_modules'],
      extensions: ['.js', '.json'],
      mainFields: ['loader', 'main']
  },
};