webpack.config.js

webpack.config.js

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

const sourcePath = path.resolve(__dirname, 'public')

const isProduction = process.env.NODE_ENV === 'production'

const stats = {
  assets: true,
  children: false,
  chunks: false,
  hash: false,
  modules: false,
  publicPath: false,
  timings: true,
  version: false,
  warnings: true
}

let plugins = [
  new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true })
]
let cssLoader
if (isProduction) {
  plugins.push(
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true
      }
    })
  )
  cssLoader = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          module: true, // css-loader 0.14.5 compatible
          modules: true,
          localIdentName: '[hash:base64:5]'
        }
      },
      {
        loader: 'sass-loader',
        options: {
          outputStyle: 'collapsed',
          sourceMap: true,
          includePaths: [sourcePath]
        }
      }
    ]
  })
} else {
  plugins.push(
    // show module names instead of numbers in webpack stats
    new webpack.NamedModulesPlugin(),
    // don't spit out any errors in compiled assets
    new webpack.NoEmitOnErrorsPlugin()
  )
  cssLoader = [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        module: true,
        sourceMap: true,
        localIdentName: '[path][name]-[local]'
      }
    },
    {
      loader: 'sass-loader',
      options: {
        outputStyle: 'expanded',
        sourceMap: true,
        includePaths: [sourcePath]
      }
    }
  ]
}

module.exports = {
  entry: {
    main: sourcePath + '/scripts/index'
  },
  output: {
    path: sourcePath + '/compiled',
    filename: 'scripts.js'
  },
  module: {
    rules: [
      {
        test: /\.(html|svg|jpe?g|png|ttf|woff2?)$/,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'static/[name]-[hash:8].[ext]'
          }
        }
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loader: cssLoader
      }
    ]
  },
  watch: !isProduction,
  watchOptions: {
    aggregateTimeout: 100
  },
  devtool: isProduction ? false : 'inline-cheap-module-source-map',
  plugins,
  stats
}