Switched from webpack.config.js to vue.config.js and VueLoaderPlugin is throwing an error when doing a build - npm

Question

We are switching our vue application over to use vue.config.js instead of webpack.config.js, and I am encountering some issues when trying to do a vue-cli-service build. The main error I am seeing is:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
For reference, here are our package.json, vue.config.js, and babel.config.js
I'm sure there are some things in the vue.config.js that could be cleaned up, but ignoring some of those things, I believe our VueLoaderPlugin should be set up correctly, and it was working in the webpack.config.js before getting moved over to vue.config.js
package.json
{
"name": "project-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"start-dev": "vue-cli-service serve --mode development",
"build-dev": "vue-cli-service build --mode development",
"build-stg": "vue-cli-service build --mode stage --dest dist-stage",
"build-prod": "vue-cli-service build --mode production --dest dist-prod",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/core": "^7.0.0-rc.1",
"#babel/preset-env": "^7.0.0-rc.1",
"#vue/cli-plugin-babel": "^3.5.0",
"#vue/cli-plugin-eslint": "^3.5.0",
"#vue/cli-service": "^3.5.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.5.0",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^2.0.1",
"cross-env": "^5.2.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"file-loader": "^3.0.1",
"jest": "^24.5.0",
"jest-serializer-vue": "^2.0.2",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"webpack-serve": "^3.0.0-beta.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"jest": {
"verbose": true,
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"description": "## Project setup ``` npm install ```",
"main": "babel.config.js",
"keywords": [],
"author": "",
"license": "ISC"
}
vue.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const env = require(process.env.VUE_APP_NODE_ENV === '' ? './.env' : './.env.' + process.env.VUE_APP_NODE_ENV);
const setPath = function(folderName) {
return path.join(__dirname, folderName);
}
const buildingForLocal = process.env.VUE_APP_NODE_ENV === 'local';
const extractHTML = new HtmlWebpackPlugin({
title: 'Project',
filename: 'index.html',
template: 'public/index.html',
inject: true,
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
html5: true,
minifyCSS: true,
removeComments: true,
removeEmptyAttributes: true
},
environment: process.env.VUE_APP_NODE_ENV,
isLocalBuild: buildingForLocal,
imgPath: (!buildingForLocal) ? 'assets' : 'src/assets'
});
module.exports = {
publicPath: '/',
outputDir: buildingForLocal ? path.resolve(__dirname) : setPath(process.env.VUE_APP_DROP_LOCATION),
configureWebpack: {
entry: [
'./src/main.js'
],
output: {
filename: buildingForLocal ? '[name].js' : '[name].[hash].js'
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
vue: buildingForLocal ? 'vue/dist/vue.js' : 'vue/dist/vue.min.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: "babel-loader",
options: { presets: ['#babel/preset-env'] }
}]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader'
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]',
useRelativePath: buildingForLocal
}
}
]
},
plugins: [
extractHTML,
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
//filename: "css/styles.[hash].css",
//chunkFilename: "[id].css"
}),
new webpack.DefinePlugin({
'process.env': env
}),
new CleanWebpackPlugin(),
new VueLoaderPlugin()
],
optimization: {
splitChunks: false
},
mode: buildingForLocal ? 'development' : 'production'
},
devServer: {
historyApiFallback: true,
noInfo: false
}
};
babel.config.js
module.exports = {
"presets": [
["#babel/preset-env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"plugins": ["#babel/plugin-syntax-dynamic-import"],
"env": {
"test": {
"presets": [
["#babel/preset-env", { "targets": { "node": "current" }}]
]
}
}
}