Ошибка в модуле ввода не найдена - в файле конфигурации Webpack - PullRequest
Новая
       416

Ошибка в модуле ввода не найдена - в файле конфигурации Webpack

2 голосов
/ 07 апреля 2019

Я пытаюсь настроить веб-пакет для ReactJs. Я не знаю, что не так с моим файлом конфигурации Webpack, который дает мне

ОШИБКА в модуле ввода не найдена: ошибка: не удается разрешить './src' в «D: \ WD \ Javascript \ Проекты \ reactjs-основы

КОД ЗДЕСЬ - Два файла "Webpack.config.js" и "Package.json"

Код Webpack.config.js: 

var webpack = require('webpack');
var path = require('path');

var DIST_DIR = path.resolve(__dirname,'dist');
var SRC_DIR = path.resolve(__dirname,'src');

var config = {
    entry: SRC_DIR+'/app/index.js',
    output:{
        path:DIST_DIR+'/app',
        filename:'bundle.js',
        publicPath:'/app/'
    },
    module:{
        rules: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                use:{
                    loader:'babel-loader',
                    query:{
                        presets:['react','es2015','stage-2']
                    }
                }
            }
        ]
    },
    mode: 'development',
    watch: true

}

module.export = config;

Package.json Файл: 

{
  "name": "reactjs-basics",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": " npm run build",
    "build": "webpack -d && copy src\\app/index.html dist\\index.html && webpack-dev-server --content-base src\\ --inline --hot",
    "build:prod": "webpack -p && cp src\\app/index.html dist\\index.html"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "2015": "0.0.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }
}

**

для справки: структура папок с конфигурационным кодом Webpack. Я прилагаю изображение ниже

**

Пожалуйста, нажмите здесь для просмотра структуры папок, код и структура папок сопоставлены

1 Ответ

2 голосов
/ 07 апреля 2019

Вы должны изменить несколько вещей

  • В вашем webpack.config.js у вас есть module.export. Это неверно должно быть module.exports
  • Вы используете babel-core@6.26.3 с babel-loader@8.0.5. babel-loader@8.* не совместим с babel-core@6.*. Вы должны использовать babel-loader@7. Удалите существующий babel-loader, используя npm uninstall -D babel-loader, и установите babel-loader@7, используя npm install -D babel-loader@7

Еще одна вещь, которую я отметил, вы указали mode: 'development' в своем webpack.config.js. лучше установить mode to development or production через параметры времени выполнения

Обновление

Удалите mode & watch из вашего webpack.config.js

mode: 'development',
watch: true

Обновите package.json, указав следующие данные.

Режим разработки Вам не нужно устанавливать watch & mode, так как webpack-dev-server сделает это за вас, когда вы запустите npm run dev

"scripts": {
    "webpack": "webpack",
    "dev": "mkdir -p dist && cp ./src/index.html dist/index.html && webpack-dev-server",
    "prod": "mkdir -p dist && cp ./src/index.html dist/index.html && npm run webpack -- --mode production"
}

Чтобы запустить local server, вам необходимо добавить нижеуказанную конфигурацию в webpack.config.js. Обратите внимание на directory name, на который указывает devserver. 

devServer: {
    contentBase: path.join(__dirname, "dist/"),
    port: 9000
},

Режим производства Выполните npm run prod, чтобы построить проект в режиме производства

Вы можете увидеть localhost в рабочем состоянии при запуске npm run dev. Этот сервер запущен библиотекой webpack-dev-server. Для production build вы должны настроить свой собственный сервер

Дайте мне знать, если это поможет

...