Ошибка в модуле ввода не найдена - в файле конфигурации Webpack
Я пытаюсь настроить веб-пакет для ReactJs. Я понятия не имею, что не так с моим файлом конфигурации Webpack, который дает мне
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\wd\javascript\Projects\reactjs-basics
КОД ЗДЕСЬ - два файла "Webpack.config.js" и "Package.json"
Webpack.config.js code is :
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 File is
{
"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"
}
}
**
for reference, Folder Structure with Webpack config code i have attache an image below
**
Пожалуйста, нажмите здесь, чтобы увидеть структуру папок, код и структура папок сопоставляются
@divine проверил это, это не сработало :(
Вы можете поделиться ссылкой git на свою кодовую базу?
@divine вот моя ссылка на git github.com/avvncor/reactJs-основы
@divine, все скомпилировано, спасибо. Мой локальный хост не работает. Он не говорит мне, что "результат Webpack - это сервер из приложения"
@divine ** как установить режим разработки или производства с помощью параметров среды выполнения **
проверьте это, чтобы установить режим через cli webpack.js.org/configuration/режим
@божественный как насчет localhost, он не запускается
проверьте мой обновленный ответ
@divine это не сработало, я обновил свой git, вы можете увидеть и исправить оттуда
Ответы 1
Вы должны изменить несколько вещей
- В вашем
webpack.config.jsу вас естьmodule.export. Это неправильно. это должно бытьmodule.exports - Вы используете
[email protected]с[email protected].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, чтобы построить проект в рабочем режиме.
Вы можете видеть локальный хост в рабочем состоянии при запуске npm run dev. Этот сервер запускается webpack-dev-server библиотекой. Для production build вы должны настроить свой собственный сервер
Позвольте мне знать, если это помогает
@AmaanImtiyaz Вы можете видеть локальный хост в рабочем состоянии, когда ваш запуск npm run dev. Этот сервер запускается webpack-dev-server библиотекой. Для production build вы должны настроить свой собственный сервер
@девайн это не сработало, я обновил свой git, вы можете увидеть и исправить оттуда
@AmaanImtiyaz, я рекомендую вам удалить все из вашего scripts в package.json. затем скопируйте код «скриптов» из моего ответа, а затем вставьте его в свой scripts в package.json. Затем выполните npm run dev . Вы используете команду copy вместо cp для copy файлов из одной папки в другую. Какой OS вы используете?
@AmaanImtiyaz, тогда попробуйте это для тестирования, если ваш проект работает нормально, позже вы сможете сделать его гладким. вручную создайте папку dist внутри вашего проекта. скопируйте это scripts и используйте в своем проекте для тестирования. "scripts": { "webpack": "webpack", "dev": "webpack-dev-server", "prod": "npm run webpack -- --mode production" }
@AmaanImtiyaz не забудьте переместить свой index.html в папку dist. вам нужно найти альтернативные команды copy files и create directory в Windows
@AmaanImtiyaz без проблем. вы можете проголосовать, если хотите. Веб-сайт webpack имеет хорошую документацию, вы можете прочитать ее, чтобы узнать о ней больше.
измените свой объект записи на
entry: './src/app/index.js'и проверьте, работает ли он, выполнив скрипт веб-пакета