0

Добрый день, как исправить ошибку в 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

2

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.