Basic webpack config

package.json

{
  "name": "webpack-starter",
  "version": "1.0.0",
  "description": "simple webpack config",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prebuild": "npm install",
    "build": "cross-env production=true webpack --config webpack.config.js --progress --colors",
    "prestart": "npm install",
    "start": "webpack-dev-server --colors --hot --progress"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [

  ],
  "author": "BatyaHack",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.1.3",
    "css-loader": "^0.28.5",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.5",
    "image-webpack-loader": "^3.4.2",
    "lodash": "^4.17.4",
    "node-sass": "^4.5.3",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.4",
    "webpack-dev-server": "^2.7.1"
  }
}

webpack.conf.js

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

const isDevelopment = !process.evn.production;
const assetsPath = path.join(__dirname + '/public');

const extractSass = new ExtractTextPlugin({
  filename: '[name].css',
  disable: isDevelopment
});

module.export = {
  entry: {
    main: './src/js/index',
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'public'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['env'], // todo очень топорный метод. так как работает вме по станларту. Загуглить presets: ['env'] и сдлеать нормально
            }
          }]
      },
      {
        test: /\.scss$/,
        exclude: [/node_modules/],
        use: extractSass.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: !isDevelopment
              }
            },
            'sass-loader',
            'resolve-url-loader'
          ]
        }),
      },
      {
        test: /\.(git|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name][hash].[ext]' // todo обернуть в функцию которая будет в зависимости от dev ставить хеши
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 70
              }
            }
          }
        ]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name][hash].[ext]' // todo не забыть про мега хеш функцию
          }
        },
      },
    ]
  },
  plugins: [
    // тут идет подключение плагинов
    // new webpack.ProvidePlugin({
    //   _: 'lodash'
    // }),
    extractSass
  ],
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    compress: true,
    port: 9000
  }

};

if (isDevelopment) {
  fs.readdirSync(assetsPath)
      .map((fileName) => {
        if (['.css', '.js'].includes(path.extname(fileName))) {
          return fs.unlinkSync(`${assetsPath}/${fileName}`);
        }

        return '';
      });
} else {
  config.plugins.push(
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
          drop_console: true,
          unsafe: true
        }
      })
  );
}

// todo add map