Shopify webpack config to work with themekit

webpack.config.coffee

path = require('path')
read = require('read-yaml')
MiniCssExtractPlugin = require('mini-css-extract-plugin')
UglifyJsPlugin = require('uglifyjs-webpack-plugin')
browserSync = require('browser-sync');
BrowserSyncPlugin = require('browser-sync-webpack-plugin')
CopyPlugin = require('copy-webpack-plugin')
RemovePlugin = require('remove-files-webpack-plugin')

devMode = process.env.NODE_ENV == 'development'

config = read.sync('config.yml')
themekitEnv = if devMode then config.development else config.production
themeID = themekitEnv.theme_id
storeURL = themekitEnv.store

config = [
  {
    watch: devMode
    entry:
      app: './javascripts/app.coffee'
      critical: './javascripts/critical.coffee'
      application: './stylesheets/application.scss'
      home_header: './stylesheets/home_header.scss'
      about_header: './stylesheets/about_header.scss'
      product_header: './stylesheets/product_header.scss'
      deferred: './stylesheets/deferred.scss'
    module:
      rules: [
        {
          test: /\.coffee$/
          use: [ 'coffee-loader' ]
        }
        {
          test: /\.(scss|sass|css)$/
          use: [
            { loader: MiniCssExtractPlugin.loader }
            { loader: 'css-loader' }
            { loader: 'postcss-loader' }
            {
              loader:'sass-loader'
              options:
                sassOptions:
                  outputStyle: if devMode then 'expanded' else 'compressed'
                  sourceComments: devMode
                  sourceMap: true
            }
          ]
        }
        {
          test: /\.(png|woff|woff2|eot|ttf|otf|svg)$/
          use: [
            {
              loader: 'url-loader?limit=100000'
              options:
                name: '[name].[ext]'
            }
          ]
        }
      ]
    output:
      path: path.resolve(__dirname, 'assets')
      filename: '[name].js'
    externals:
      jquery: 'jQuery'
    optimization: {
      minimize: !devMode
      minimizer: [
        new UglifyJsPlugin(
          test: /\.js$/
          parallel: true
          sourceMap: true
        )
      ]
    }
    plugins: [
      new CopyPlugin([
        { from: 'images/*', flatten: true }
        { from: 'fonts/*', flatten: true }
      ])
      new RemovePlugin({
        after: {
          include: [
            './assets/application.js'
            './assets/home_header.js'
            './assets/about_header.js'
            './assets/product_header.js'
            './assets/deferred.js'
          ]
        }
      })
      new MiniCssExtractPlugin(
        path: path.resolve(__dirname, 'assets')
        filename: '[name].css.liquid'
      )
      new BrowserSyncPlugin(
        https: true
        proxy: 'https://' + storeURL + '?preview_theme_id=' + themeID
        reloadDelay: 2000
        snippetOptions:
          rule: {
            match: /<head[^>]*>/i
            fn: (snippet, match) ->
              match + snippet
          }
        middleware: [
          (req, res, next) ->
            # Shopify sites with redirection enabled for custom domains force redirection
            # to that domain. `?_fd=0` prevents that forwarding.
            # ?pb=0 hides the Shopify preview bar
            prefix = if req.url.indexOf('?') > -1 then '&' else '?'
            queryStringComponents = [ '_fd=0&pb=0' ]
            req.url += prefix + queryStringComponents.join('&')
            next()
        ]
        files: [
          match: [
            '**/*.liquid'
            'assets/application.scss'
            'assets/home_header.scss'
            'assets/home_footer.scss'
            'assets/about_header.scss'
            'assets/product_header.scss'
            'assets/application.js'
            'assets/critical.js'
          ]
          fn: (event, file) ->
            if event == 'change'
              bs = browserSync.get('bs-webpack-plugin')
              bs.reload()
        ]
      )
    ]
  }
]

module.exports = config