webpack config

webpack.config.js

// KPW 
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import config from '../config'
import _debug from 'debug'
import newrelic_staging from './newrelic_staging'
import newrelic_prod from './newrelic_prod'

const debug = _debug('app:webpack:config')
const paths = config.utils_paths
const {__DEV__, __PROD__, __TEST__, __STAGING__} = config.globals

debug('Create configuration.')

const newRelicScript = () => {
  if (__STAGING__) {
    return newrelic_staging
  }
  if (__PROD__) {
    return newrelic_prod
  }
  if (__DEV__) {
    return null
  }
}

const webpackConfig = {
  name: 'client',
  target: 'web',
  devtool: config.compiler_devtool,
  resolve: {
    modules: ['./node_modules', './src'],
    extensions: ['.js', '.jsx']
  },
  module: {},
  externals: {
    'react/addons': true,
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  },
}
// ------------------------------------
// Entry Points
// ------------------------------------
const APP_ENTRY_PATHS = [
  'babel-polyfill',
  paths.client('main.js')
]

webpackConfig.entry = {
  app: __DEV__
    ? APP_ENTRY_PATHS.concat(`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`)
    : APP_ENTRY_PATHS,
  vendor: config.compiler_vendor
}

// ------------------------------------
// Bundle Output
// ------------------------------------
webpackConfig.output = {
  filename: `[name].[${config.compiler_hash_type}].js`,
  path: paths.dist(),
  publicPath: config.compiler_public_path
}

// ------------------------------------
// Plugins
// ------------------------------------
webpackConfig.plugins = [
  new webpack.DefinePlugin(config.globals),
  new HtmlWebpackPlugin({
    template: paths.client('index.ejs'),
    hash: false,
    favicon: paths.client('static/favicon.ico'),
    filename: 'index.html',
    inject: 'body',
    minify: {
      collapseWhitespace: true
    },
    newrelic: newRelicScript()
  })
]

if (__DEV__) {
  debug('Enable plugins for live development (HMR, NoErrors).')
  webpackConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
} else if (__PROD__) {
  debug('Enable plugins for production (UglifyJS).')
  webpackConfig.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        unused: true,
        dead_code: true,
        warnings: false
      }
    })
  )
}

// Don't split bundles during testing, since we only want import one bundle
if (!__TEST__) {
  webpackConfig.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor']
    })
  )
}

// ------------------------------------
// Loaders
// ------------------------------------
webpackConfig.module.rules = [
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: [
            "es2015",
            "react",
            "stage-0"
          ],
          plugins: ["transform-runtime"]
        }
      }
    ]
  }
]

// File rules
/* eslint-disable */
webpackConfig.module.rules.push(
  //{
    //test: /\.woff(\?.*)?$/,
    //use: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff'
  //},
  //{
    //test: /\.woff2(\?.*)?$/,
    //use: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2'
  //},
  //{
    //test: /\.otf(\?.*)?$/,
    //use: 'file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype'
  //},
  //{
    //test: /\.ttf(\?.*)?$/,
    //use: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream'
  //},
  //{
    //test: /\.eot(\?.*)?$/,
    //use: 'file?prefix=fonts/&name=[path][name].[ext]'
  //},
  {
    test: /\.svg(\?.*)?$/,
    use: 'raw-loader'
  },
  // TODO switch to this way ASAP
  //{
    //test: /\.svg$/,
    //use: [
      //'raw=loader',
      //'babel-loader',
      //'svg-react-loader',
    //],
  //},
  {
    test: /\.(png|jpg)$/,
    use: 'url-loader'
  }
)
/* eslint-enable */

// ------------------------------------
// Style Loaders
// ------------------------------------
if (__DEV__) {
  webpackConfig.module.rules.push({
    test: /\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      'postcss-loader'
    ]
  })
}
// ------------------------------------
// Finalize Configuration
// ------------------------------------
// when we don't know the public path (we know it only when HMR is enabled [in development]) we
// need to use the extractTextPlugin to fix this issue:
// http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809
if (!__DEV__) {
  debug('Apply ExtractTextPlugin to CSS rules.')

  webpackConfig.module.rules.push({
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        },
        {
          loader: 'postcss-loader'
        }
      ]
    })
  })

  webpackConfig.plugins.push(
    new ExtractTextPlugin({
      filename: '[name].[contenthash].css',
      disable: false,
      allChunks: true,
      ignoreOrder: true
    })
  )
}

export default webpackConfig

// PDF
const { resolve } = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: [
        './app.js'
    ],
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    context: resolve(__dirname, 'src'),
    resolve: {
        extensions: ['.js', '.jsx'],
        modules: ['./node_modules', './src' ]
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loaders: [
                    'babel-loader'
                ],
                include: [
                    resolve(__dirname, 'src'),
                    resolve(__dirname, 'tests')
                ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[name]__[local]___[hash:base64:5]'
                      }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.svg$/,
                use: [
                    'babel-loader',
                    'svg-react-loader',
                ],
            },
        ]
    },
    devServer: {
        contentBase: resolve(__dirname, 'dist'),
        publicPath: '/',
        port: 8080,
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new HtmlWebpackPlugin({
            template: 'template.html'
        })
    ]
};