Webpack development config file #code-fragments #webpack #building

webpack.config.dev.js

var path              = require('path'),
    webpack           = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    OpenBrowserPlugin = require('open-browser-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    precss            = require('precss'),
    autoprefixer      = require('autoprefixer'),
    DashboardPlugin   = require('webpack-dashboard/plugin');
    mockMode          = false;

process.argv.forEach((param) => {
  if (param === '--mock') {
    mockMode = true;
  }
});

module.exports = {
  entry: [
    'webpack-dev-server/client?http://127.0.0.1:8080',
    'webpack/hot/dev-server',
    path.resolve(__dirname, 'src/index.js')
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new ExtractTextPlugin('reference-app.css'),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.pug'
    }),
    new HtmlWebpackPlugin({
      filename: 'views/index.html',
      template: './src/views/index.pug'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'MOCK': mockMode
      }
    }),
    new OpenBrowserPlugin({ url: 'http://127.0.0.1:8080' }),
    new DashboardPlugin()
  ],
  resolve: {
    extensions: ['', '.js', 'css'],
  },
  module: {
    loaders: [
      {
        test: /\.pug$/,
        loader: 'pug'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader!postcss-loader'
        )
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: '/node_modules',
        loader: 'babel-loader',
        query: {
          presets: [
            'es2015',
            'stage-0'
          ],
          plugins: [
            'transform-decorators-legacy',
            'transform-class-properties'
          ]
        }
      }
    ]
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
}