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"
}
}
ошибка при попытке сборки dev версии:
> sample-gulp@1.0.0 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! sample-gulp@1.0.0 dev: `webpack --mode=development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample-gulp@1.0.0 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
и при production:
> sample-gulp@1.0.0 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! sample-gulp@1.0.0 build: `webpack --mode=production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample-gulp@1.0.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\elena\AppData\Roaming\npm-cache\_logs\2021-04-24T18_31_37_842Z-debug.log
Простой
