NPM Configs for Webpack & Gulp for a (mostly) static Wagtail site.

gulpfile.js

const { task, src, dest, series, watch } = require('gulp')
const sass = require('gulp-sass')
const autoprefixer = require('gulp-autoprefixer')
const rename = require('gulp-rename')

sass.compiler = require('node-sass')

function scss() {
  return src('./src/sass/main.scss')
    .pipe(sass({ outputStyle: 'compressed' })
      .on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: [
        'last 4 versions',
        '> 2%'
      ],
      grid: true
    }))
    .pipe(rename('trevdev.css'))
    .pipe(dest('./wagtail/trevdev/static/css'))
}

function watcher() {
  watch('./src/sass/**/*.scss', scss)
}

task('default', series(scss))
task('dev', series(scss, watcher))

package.json

{
  "name": "vue-webpack-gulp-workflow",
  "version": "1.0.0",
  "description": "To compile vue components into a usable js file for use in a Wagtail project, and render global css",
  "main": "webpack.dev.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config webpack.dev.js & gulp dev",
    "build": "webpack --config webpack.prod.js && gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
    "@babel/preset-env": "^7.3.1",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.5",
    "babel-preset-minify": "^0.5.0",
    "css-loader": "^2.1.0",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "vue": "^2.6.4",
    "vue-loader": "^15.6.2",
    "vue-template-compiler": "^2.6.4",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  }
}

webpack.dev.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const autoprefixer = require('autoprefixer')

module.exports = {
  mode: 'development',
  entry: './src/vue/main.js',
  output: {
    filename: 'trevdev.js',
    path: path.resolve(__dirname, 'wagtail', 'trevdev', 'static', 'js')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-object-rest-spread']
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                autoprefixer({
                  browsers: ['last 4 versions', '> 2%'],
                  grid: true
                })
              ]
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  watch: true
}

webpack.prod.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const autoprefixer = require('autoprefixer')

module.exports = {
  mode: 'production',
  entry: './src/sass/main.scss',
  output: {
    filename: 'trevdev.js',
    path: path.resolve(__dirname, 'wagtail', 'trevdev', 'static', 'js')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {
              targets: {
                browsers: [
                  '> 2%',
                  'last 2 versions'
                ]
              }
            }]],
            plugins: ['@babel/plugin-proposal-object-rest-spread'],
            env: {
              production: {
                presets: ["minify"]
              }
            }
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                autoprefixer({
                  browsers: ['last 4 versions', '> 2%'],
                  grid: true
                })
              ]
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}