webpack.config.js

webpack.config.js

var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

var config = require('./config');


module.exports = {
  devtool: 'source-map',
  context: config.dest,

  entry: [
    path.resolve(config.src, 'js', 'index.js')
  ],

  output: {
    path: config.dest,
    filename: 'app.boundle.[hash].js',
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.s.*ss$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { sourceMap: true } },
            { loader: 'sass-loader', options: { sourceMap: true } },
          ],
        }),
        exclude: /(node_modules|bower_components)/
      },
    ]
  },

  devServer: {
    hot: true,
    quiet: false,
    // It suppress everything except error, so it has to be set to false as well to see success build.
    noInfo: false,
    // config for minimal console.log mess
    stats: {
      assets: false,
      colors: true,
      version: false,
      hash: false,
      timings: false,
      chunks: false,
      chunkModules: false,
    },
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(config.src, 'index.html'),
    }),
    new ExtractTextPlugin({
      filename: 'app.[hash].css',
      allChunks: true,
    }),
    new CopyWebpackPlugin([
      { from: config.img.src, to: config.img.dest }
    ]),
    new webpack.HotModuleReplacementPlugin(),
  ],

  resolveLoader: {
    modules: [
      path.resolve(config.src, 'js'),
      config.nodeModules,
    ],
  },
}