L
L
lena_shevtsova2021-04-25 11:12:20
webpack
lena_shevtsova, 2021-04-25 11:12:20

Why doesn't the .js file have modules code after building a js project with webpack?

webpack.config.js:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var AudioSpritePlugin = require("webpack-audio-sprite-plugin");
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
    entry: resolve(__dirname,'src', 'main.js'),
    output: {
        path: resolve(__dirname, 'build'),
        filename: 'main.[contenthash].js'
    },
    module: {
        rules: [
            { 
                test: /\.css$/, 
                use: [MiniCssExtractPlugin.loader, 'css-loader'] 
            },
            { 
                test: /\.mp3$/, 
                loader: AudioSpritePlugin.loader() 
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({template: resolve(__dirname, 'index.html')}),
        new MiniCssExtractPlugin({ 
            filename: '[name].[contenthash].css'
        }),
        new BundleAnalyzerPlugin(),
        new AudioSpritePlugin()
    ] 
};


main.js:
import "./changeTab.js";
import "./datecalc.js";
import "./timer.js";
import "../styles/main.css";

package.json
{
    "name": "sample-gulp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "webpack --mode=development",
        "build": "webpack --mode=production",
        "serve": "webpack serve --mode=production",
        "test": "echo\"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "luxon": "^1.26.0"
    },
    "devDependencies": {
        "css-loader": "^5.2.4",
        "html-webpack-plugin": "^5.3.1",
        "mini-css-extract-plugin": "^1.5.0",
        "webpack": "^5.35.1",
        "webpack-audio-sprite-plugin": "^0.1.0",
        "webpack-bundle-analyzer": "^4.4.1",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^3.11.2"
    }
}

error when trying to build dev version:
> [email protected] dev D:\study\frontend\bundlers\les1\ts1
> webpack --mode=development

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use 127.0.0.1:8888       
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)        
    at listenInCluster (net.js:1366:12)
    at doListen (net.js:1503:7)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1345:8)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  address: '127.0.0.1',
  port: 8888
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack --mode=development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev 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\elena\AppData\Roaming\npm-cache\_logs\2021-04-24T18_32_57_706Z-debug.log

and in production:
> [email protected] build D:\study\frontend\bundlers\les1\ts1
> webpack --mode=production

Error parsing bundle asset "D:\study\frontend\bundlers\les1\ts1\build\main.71de5633ea08b589f344.js": no such file

No bundles were parsed. Analyzer will show only original module sizes 
from stats file.

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use 127.0.0.1:8888       
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)        
    at listenInCluster (net.js:1366:12)
    at doListen (net.js:1503:7)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1345:8)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  port: 8888
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack --mode=production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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\elena\AppData\Roaming\npm-cache\_logs\2021-04-24T18_31_37_842Z-debug.log

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question