generator-webpack-project/app/templates/webpack.config.js

Yeoman generator for Webpack projects

// Config with JavaScript (ES6)

const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const merge = require('webpack-merge')

const parts = require('./webpack.parts')
const TITLE = '<%= title %>'
const EXT = '<%= lang === 'js' ? '.js' : '.ts' %>'
const PROJECT_NAME = JSON.parse(JSON.stringify(require('./package.json').name))
const PATHS = {
  app: path.join(__dirname, '/src'),
  build: path.join(__dirname, '/build')
}

const commonConfig = merge([
  {
    entry: [<% if (lang === 'js') { %>'babel-polyfill', <% } %>PATHS.app + '/index' + EXT], // TODO: TypeScript
    plugins: [
      // HTML template
      new HtmlWebpackPlugin({
        title: TITLE,
        template: PATHS.app + '/template.ejs'
      })
    ]
  },
  // Linting
  parts.lint({ include: PATHS.app }),
  parts.lintCss({ include: PATHS.app }),
  // Transpiling
  parts.load({ include: PATHS.app })
])

const productionConfig = merge([
  {
    output: {
      chunkFilename: '[name].[chunkhash:8].js',
      filename: '[name].[chunkhash:8].js',
      path: PATHS.build,
      publicPath: process.env.publicPath === '1' ? `/${PROJECT_NAME}/` : ''
    },
    plugins: [
      // Favicon
      new FaviconsWebpackPlugin(PATHS.app + '/favicon.png'),
      new webpack.HashedModuleIdsPlugin()
    ]
  },
  parts.minify(),
  parts.extractBundles([
    {
      name: 'vendor',

      minChunks: ({ resource }) =>
        resource &&
        resource.indexOf('node_modules') >= 0 &&
        resource.match(/\.js$/)
    },
    {
      name: 'manifest',
      minChunks: Infinity
    }
  ]),
  parts.extractCss({
    use: ['css-loader', parts.autoprefix(), 'fast-sass-loader']
  }),
  parts.purifyCss({
    paths: glob.sync(`${PATHS.app}/**/*` + EXT, { nodir: true })
  }),
  parts.minifyCSS({
    options: {
      discardComments: {
        removeAll: true
      },
      // Run cssnano in safe mode to avoid
      // potentially unsafe transformations.
      safe: true
    }
  }),
  parts.generateSourceMaps({ type: 'source-map' }),
  parts.loadImages({
    options: {
      limit: 15000,
      name: '[name].[ext]'
    }
  })
])

const developmentConfig = merge([
  {
    output: {
      path: PATHS.build,
      filename: 'bundle.js',
      devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
    }
  },
  parts.devServer({
    // Customize host/port here if needed
    host: process.env.HOST,
    port: process.env.PORT
  }),
  parts.loadCss(),
  parts.generateSourceMaps({ type: 'cheap-module-eval-source-map' }),
  parts.loadImages()
])

module.exports = env => {
  if (env === 'production') {
    return merge(commonConfig, productionConfig)
  }

  return merge(commonConfig, developmentConfig)
}