Webpack с Бабелем не работает - PullRequest
Новая
       5

Webpack с Бабелем не работает

0 голосов
/ 24 мая 2018

Я запускаю в командной строке Windows: npm start

и получаю:

JavaScript-ES6@1.0.0 start C: \ Dans \ Courses \ JavaScript-ES6 webpack-dev-server

× ｢wds｣: Неверный объект конфигурации.Webpack был инициализирован с использованием объекта конфигурации, который не соответствует схеме API.- configuration.module имеет неизвестное свойство 'loaders'.Эти свойства являются действительными: object {exprContextCritical ?, exprContextRecursive ?, exprContextRegExp ?, exprContextRequest ?, noParse ?, rules ?, defaultRules ?, unknownContextCritical ?, unknownContextRecursive ?, unknownContextRegextext_ExpExeContext_Wext_RackExt.dll? strictExportPresence ?, strictThisContextOnImports?} -> Опции, влияющие на обычные модули (NormalModuleFactory).

npm ERR!Windows_NT 10.0.17134 npm ERR!argv "C: \ Program Files \ nodejs \ node.exe" "C: \ Program Files \ nodejs \ node_modules \ npm \ bin \ npm-cli.js" "start" npm ERR!узел v6.10.0 нпм ERR!npm v3.10.10 npm ERR!код ELIFECYCLE npm ERR!JavaScript-ES6@1.0.0 start: webpack-dev-server npm ERR!Статус выхода 1 npm ERR!нпм ERR!Ошибка при запуске сценария JavaScript-ES6@1.0.0 «webpack-dev-server».нпм ERR!Убедитесь, что у вас установлена ​​последняя версия node.js и npm.нпм ERR!Если вы это сделаете, это, скорее всего, проблема с пакетом JavaScript-ES6, npm ERR!не с самой нпм.нпм ERR!Скажите автору, что это не работает в вашей системе: npm ERR!webpack-dev-server npm ERR!Вы можете получить информацию о том, как открыть проблему для этого проекта, с помощью: npm ERR!ошибки npm JavaScript-ES6 ошибка npm!Или, если это не доступно, вы можете получить их информацию по адресу: npm ERR!владелец npm ls JavaScript-ES6 npm ERR!Скорее всего, есть дополнительные выходные данные журнала.

Содержимое моего файла webpack.config.js:

const path = require ('path'); 

   module.exports = {
   entry: ['./app/index.js'],
   output: {
       path: path.resolve(__dirname, 'build'),
       filename: 'bundle.js'
   },
   module: {
       loaders: [
         {  
           loader: 'babel-loader',
           test: /\.js$/,
           exclude: /node_modules/
         }
        ]
   },
     devServer: {
        port: 3000,
        contentBase: './build',
        inline: true
    }
}

Содержимое моего файла package.json: 

{
  "name": "JavaScript-ES6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "build": "webpack",
  "start": "webpack-dev-server"
 },
   "babel": {
   "presets": ["es2015"]
    },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  }
}

1 Ответ

0 голосов
/ 24 мая 2018

В конфигурации вашего веб-пакета есть одна ошибка.
Внутри модуля ключевое слово должно быть rules вместо loaders . 

const path = require('path');

module.exports = {
   entry: ['./app/index.js'],
   output: {
       path: path.resolve(__dirname, 'build'),
       filename: 'bundle.js'
   },
   module: {
       rules: [ //here
         {  
           loader: 'babel-loader',
           test: /\.js$/,
           exclude: /node_modules/
         }
        ]
   },
     devServer: {
        port: 3000,
        contentBase: './build',
        inline: true
    }
}
...