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

Yeoman generator for Webpack projects

const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const PurifyCSSPlugin = require('purifycss-webpack')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')<% if (lang === 'js') { %>
const BabiliPlugin = require('babili-webpack-plugin')<% } %>
const cssnano = require('cssnano')

exports.devServer = ({ host, port } = {}) => ({
  devServer: {
    historyApiFallback: true,
    stats: 'errors-only',
    host, // Defaults to `localhost`
    port, // Defaults to 8080
    overlay: {
      errors: true,
      warnings: true
    },
    // Don't refresh if hot loading fails. Good while
    // implementing the client interface.
    // hotOnly: true

    // If you want to refresh on errors too, set
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ]
})
<% if (lang === 'js') { %>
exports.lint = ({ include, exclude, options }) => ({
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include,
        exclude,
        enforce: 'pre',

        loader: 'eslint-loader',
        options
      }
    ]
  }
})

exports.load = ({ include, exclude }) => ({
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include,
        exclude,

        loader: 'babel-loader',
        options: {
          // Enable caching for improved performance during
          // development.
          // It uses default OS directory by default. If you need
          // something more custom, pass a path to it.
          // I.e., { cacheDirectory: '<path>' }
          cacheDirectory: true
        }
      }
    ]
  }
})

exports.minify = () => ({
  plugins: [new BabiliPlugin()]
})
<% } else { %>
exports.lint = ({ include, exclude, options }) => ({
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        enforce: 'pre',
        loader: 'tslint-loader',
        options
      }
    ]
  }
})

exports.load = ({ include, exclude }) => ({
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include,
        exclude,
        loader: 'awesome-typescript-loader'
      },
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        loader: 'source-map-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
})

exports.minify = () => ({
  plugins: [new webpack.optimize.UglifyJsPlugin({
    mangle: false
  })]
})
<% } %>
exports.generateSourceMaps = ({ type }) => ({
  devtool: type
})

exports.extractBundles = bundles => ({
  plugins: bundles.map(
    bundle => new webpack.optimize.CommonsChunkPlugin(bundle)
  )
})

exports.lintCss = ({ include, exclude }) => ({
  module: {
    rules: [
      {
        test: /\.s?css$/,
        include,
        exclude,
        enforce: 'pre',

        loader: 'postcss-loader',
        options: {
          plugins: () => [require('stylelint')()]
        }
      }
    ]
  }
})

exports.loadCss = ({ include, exclude } = {}) => ({
  module: {
    rules: [
      {
        test: /\.s?css$/,
        include,
        exclude,

        use: ['style-loader', 'css-loader', 'fast-sass-loader']
      }
    ]
  }
})

exports.autoprefix = () => ({
  loader: 'postcss-loader',
  options: {
    plugins: () => [require('autoprefixer')()]
  }
})

exports.extractCss = ({ include, exclude, use }) => {
  const plugin = new ExtractTextPlugin({
    filename: '[name].[contenthash:8].css'
  })

  return {
    module: {
      rules: [
        {
          test: /\.s?css$/,
          include,
          exclude,

          use: plugin.extract({
            use,
            fallback: 'style-loader'
          })
        }
      ]
    },
    plugins: [plugin]
  }
}

exports.purifyCss = ({ paths }) => ({
  plugins: [new PurifyCSSPlugin({ paths })]
})

exports.minifyCSS = ({ options }) => ({
  plugins: [
    new OptimizeCSSAssetsPlugin({
      cssProcessor: cssnano,
      cssProcessorOptions: options,
      canPrint: false
    })
  ]
})

exports.loadImages = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        test: /\.(png|jpg|svg)$/,
        include,
        exclude,

        use: {
          loader: 'url-loader',
          options
        }
      }
    ]
  }
})