Добрый день, как исправить ошибку в Console При запуске Webserver происходит автозагрузка, но в консоли вываливается ошибка: Uncaught Error: Cannot find module './noConflict' at webpackMissingModule (index.js:3) at eval (index.js:3) at Object.../node_modules/@babel/polyfill/lib/index.js:
//package.json
{
"name": "exelcourse",
"version": "1.0.0",
"description": "Javascript exel application",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=development webpack-dev-server --open",
"build": "cross-env NODE_ENV=production webpack --mode production"
},
"browserslist": "> 0.25%, not dead",
"repository": {
"type": "git",
"url": "git+https://gitlab.com/Dmitriy86/exelcourse.git"
},
"keywords": [
"js",
"javascript",
"exel"
],
"author": "Dmitriy Savchenko <fast27111986@gmail.com>",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/Dmitriy86/exelcourse/issues"
},
"homepage": "https://gitlab.com/Dmitriy86/exelcourse#readme",
"private": true,
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.3",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"react-hot-loader": "^4.5.3",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"webpack": "^5.0.0-beta.23",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.1",
"webpack-node-externals": "^2.5.2"
},
"dependencies": {
"@babel/polyfill": "^7.12.1"
}
}
//webpack.config.js
const webpack = require('webpack')
const isProd = process.env.NODE_ENV === 'production'//Переменная которая хранит в себе информацию о режиме сборки
const isDev = !isProd//Переменная isDev будет также хранить булевское значение;
const path = require('path') //Экспортируем модуль путей из списка стандартных пакетов node.js
console.log(isProd)
console.log(isDev)
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//Подключаем плагин очистки папки
const HtmlWebpackPlugin = require('html-webpack-plugin');//Подключаем плагин работы с html
const CopyPlugin = require("copy-webpack-plugin");//Подключаем плагин
const TerserVebPackPlugin = require('terser-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//Для того чтобы помещать цсс файл в отдельный файл
const fileName = ext => isDev ? `bundle.${ext}`: `bundle.[contenthash].${ext}`
const optimization = () => {
const config = {
splitChunks: {
chunks: "all",
}
}
if(isProd){
config.minimizer = [//Это массив
new OptimizeCssAssetsPlugin(),
new TerserVebPackPlugin(),
]
}
return config//Вернет обьект с конфигом
}
const sourceMap = () => {
isDev ? 'source-map' : null
}
module.exports = { //Экспортируем обьект из файла , который будет являтся конфигурацией для вебпака;
context: path.resolve(__dirname, 'src'), //Где лежат исходнки проэкта
mode: "development",//Указываем вебпаку в каком режиме работаем;
entry: //Точки входа для нашего приложения
[ '@babel/polyfill' , './index.js'], //Путь к основному файлу с которого все начинается
//externals: [nodeExternals()],
output: {
filename: fileName('js'), //Файл где будут находится все наши скрипты;
//добавляем хэши в название файла чтобы избежать проблем с хэшированием;
path: path.resolve(__dirname, 'dist') //Путь куда складывать все скрипты;
},
resolve: {
extensions: [
'js', //Массив расширений по умолчанию
],
alias: { //Шаблоны для путей
"@": path.resolve(__dirname, 'src'),
"@core": path.resolve(__dirname, 'src/core'),
"@css": path.resolve(__dirname, 'src/css')
}
},
optimization: optimization(),
devtool: sourceMap(), //Если мы в режиме разработки то добавляем поле source-map(добавляем карты)
devServer: {//Настраиваем девсервер
port: 5000,//Указываем порт
hot: isProd,
},
//Добавление плагинов
plugins: [ //Потребуется для взаимодействия в HTML;
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "index.html",//Откуда мы будем брать шаблон штмл чтобы плагин самостоятельно его не генерировал
minify: {//Ключ насторйки плагина
removeComments : isProd,
collapseWhitespace : isProd,
}
}),
new CopyPlugin({//Используем для переноса фавиконки;
patterns: [
{ from : path.resolve(__dirname, 'src/favicon.ico'), to : path.resolve(__dirname, 'dist')}//В конструктор передаем обьект с массивом параметров , которые в свою очередь являются тоже обьектами
//Чтобы в режиме разработки фавиконка также присутствовала;
],
}),
new MiniCssExtractPlugin({
filename: fileName('css'),//Указываем имя файла выходного
}),
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: isDev,
}
},//Находится в статической переменной плагина MiniCssExtractPlugin
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',//Добавляем лоадер который будет пропускать все через себя babel-loader
options: {
presets: ['@babel/preset-env']
}
}
}
],
},
}
//главный файл проэкта:
import './module.js'
import css from "./css/style.css";
import "./css/sass.sass";
//import "core-js/stable";
//import "regenerator-runtime/runtime";
console.log(`Hello world`)
//console.log(`NODE_ENV: ${process.env.NODE_ENV}`)
В Webpack в консоли выдает ошибку:
ERROR in ../node_modules/@babel/polyfill/lib/index.js 3:0-22 Module not found: Error: Can't resolve './noConflict' in 'C:\Users\38098\WebstormProjects\exelCourse\node_modules@babel\polyfill\lib'
ERROR in ../node_modules/@babel/polyfill/lib/index.js 5:37-73 Module not found: Error: Can't resolve 'core-js/library/fn/global' in 'C:\Users\38098\WebstormProjects\exelCourse\node_modules@babel\polyfill\lib'
webpack 5.11.1 compiled with 2 errors in 2721 ms