Webpack not creating bundle.js or error messages

Question

I've tried installing webpack and babel-loader into my vue project. When I run 'npm run dev' in my terminal, I don't get any bundled files outputted to my dist folder and I get the following message:

> vueproject@0.1.0 dev

> webpack --watch --progress --mode=development

If I run npm run serve , I get this:

 Module parse failed: Unexpected token (2:5) You may need an appropriate loader to handle this file type. | import requests | from django.shortcuts import render | from rest_framework import viewsets | from django.db import connection # This is for the my_custom_sql method. @./node_modules/cache-loader/dist/cjs.js??ref--12-0../node_modules/babel-loader/lib.?/node_modules/cache-loader/dist/cjs?js.?ref--0-0?./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist.?ref--0-1::/src/App.vue.vue&type=script&lang=js 5?0-52 139.18-31 @./src/App.vue.vue&type=script&lang=js @?/src/App:vue @./src/main.js @ multi (webpack)-dev-server/client.http://172.25.10.80:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

If I run npm run build , I get this error:

 TypeError: Class extends value undefined is not a constructor or null at Object.<anonymous> (C:\Users\user\Documents\GitHubRepositories\Django_Repository\DB_Vue_Project\vueproject\node_modules\mini-css-extract-plugin\dist\CssDependency.js:12:46) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.<anonymous> (C:\Users\user\Documents\GitHubRepositories\Django_Repository\DB_Vue_Project\vueproject\node_modules\mini-css-extract-plugin\dist\index.js:12:45) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) npm ERR. code ELIFECYCLE npm ERR. errno 1 npm ERR: vueproject@0.1.0 build. `vue-cli-service build` npm ERR. Exit status 1 npm ERR. npm ERR: Failed at the vueproject@0:1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-04-28T03_13_56_408Z-debug.log

Here's my file structure in my project:

 -vueproject -dist -src -deletethis.js package.json package-lock.json webpack.config.js babel.config.js

package.json:

 { "name": "vueproject", "version": "0.1.0", "private": true, "scripts": { "test": "webpack", "dev": "webpack --watch --progress --mode=development", "prod": "webpack --mode=production", "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@tailwindcss/line-clamp": "^0.2.0", "autoprefixer": "^9.8.6", "axios": "^0.21.1", "bcryptjs": "^2.4.3", "core-js": "^3.6.5", "mysql": "^2.18.1", "postcss": "^7.0.35", "postcss-loader": "^5.2.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0", "vue": "^3.0.0", "vue-router": "^3.5.1" }, "devDependencies": { "@babel/core": "^7.13.16", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "autoprefixer": "^10.2.5", "babel-eslint": "^10.1.0", "babel-loader": "^8.2.2", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "path": "^0.12.7", "postcss": "^8.2.9", "postcss-cli": "^8.3.1", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0", "webpack": "^4.0.0", "webpack-cli": "^4.6.0" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

webpack.config.js:

 // webpack.config.js const path = require('path'); // Define the path module, which is used for handling and transforming file paths. module.exports = { // Makes the object on the right side of the equals sign available to the outside world (webpack). context: __dirname, // Allows 'entry' to take the root of the path that you have defined. entry: 'src/deletethis.js', // Tells webpack which file(s)/modules it needs to bundle. output: { // Defines where webpack outputs the bundled file. path: path.resolve(__dirname, 'dist'), publicPath: '/dist/', filename: 'testdeletethis.js', }, module: { rules: [ // Ensures that whenever webpack finds a *.js file, it uses babel-loader to convert it to ES5. { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader', } ] } };

I've looked around the internet for a few hours today but wasn't able to find anything quite like what I'm running into. I find it odd that those two lines are all that I'm getting when I run 'npm run dev'. Any help with this issue would be appreciated. Thanks, all!

Answer 1

Your dev script only runs the Webpack dev server, so nothing would be written into dist . Also, bundling only occurs (and the dist folder created and filled) when you run the build script ( npm run build ).

But your project appears to be a Vue CLI scaffolded project (based on the @vue/cli-service dependencies), which transitively depends on Webpack, so you don't need to add a dependency on webpack or webpack-cli .

Your Webpack config doesn't seem to do anything that isn't already done by default in Vue CLI scaffolded projects. I recommend just sticking with the serve and build scripts. If you need to change the Webpack config, use vue.config.js 's configureWebpack or chainWebpack . See Working with Webpack for reference.