Webpack не стартует дев-сервер

378
11 апреля 2017, 10:57

Приветствую всех!

Начал разбираться в реакте, качнул курс для порядка... там есть все конфиги, и, судя по видео, у автора все работает нормально, но у меня почему-то не стартуется вебпак-дев-сервер.

Конфиг package.json:

{
  "name": "test-proj",
  "version": "1.0.0",
  "description": "test project",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --progress --inline --hot",
    "dev": "NODE_ENV=development && npm run start",
    "prod": "NODE_ENV=production && webpack",
    "lint": "eslint ./src",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "..."
  },
  "keywords": [
    "test",
    "study"
  ],
  "author": "...",
  "license": "ISC",
  "bugs": {
    "url": "..."
  },
  "homepage": "...",
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-eslint": "^7.2.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.28.0",
    "eslint": "^3.3.0",
    "eslint-plugin-react": "^6.1.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "react-hot-loader": "^1.3.0",
    "url-loader": "^0.5.7",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "react": "^15.5.3",
    "react-dom": "^15.5.3"
  }
}

Конфиг webpack.config.js:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/dev-server',
        './src/index.js'
    ],
    output: {
        publicPath: 'http://localhost:3000/',
        path: __dirname + '/public',
        filename: 'bundle.js'
    },
    watch: NODE_ENV == 'development',
    watchOptions: {
        aggregateTimeout: 100
    },
    devtool: NODE_ENV == 'development' ? 'cheap-inline-module-source-map' : null,
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('bundle.css'),
        new webpack.DefinePlugin({
            NODE_ENV: JSON.stringify(NODE_ENV)
        }),
        new webpack.NoErrorsPlugin()
    ],
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        moduleTemplates: ['*', 'index'],
        extensions: ['', '.js'],
        root: __dirname + '/src'
    },
    resolveLoader: {
        modulesDirectories: ['node_modules', 'bower_components'],
        moduleTemplates: ['*-loader', '*'],
        extensions: ['', '.js']
    },
    devServer: {
        host: 'localhost',
        port: 3000,
        contentBase: __dirname + '/public',
        inline: true,
        hot: true,
        historyApiFallback: true
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel-loader'],
                include: [
                    path.resolve(__dirname, 'src')
                ],
                plugins: ['transform-runtime']
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                loader: 'file?name=img/[path][name].[ext]'
            },
            {
                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
            },
            {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file?name=fonts/[name].[ext]'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]'
            }
        ]
    }
};

if (NODE_ENV == 'production') {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_console: true,
                unsafe: true
            }
        })
    );
}

Ошибки по запуску:

> test-proj@1.0.0 dev /WebServer/react.local
> NODE_ENV=development && npm run start

> test-proj@1.0.0 start /WebServer/react.local
> webpack-dev-server --progress --inline --hot
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an object.
    * configuration.entry should be a string.
    * configuration.entry should NOT have duplicate items (items ## 1 and 3 are identical) ({
        "keyword": "uniqueItems",
        "dataPath": ".entry",
        "schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems",
        "params": {
          "i": 3,
          "j": 1
        },
        "message": "should NOT have duplicate items (items ## 1 and 3 are identical)",
        "schema": true,
        "parentSchema": {
          "items": {
            "minLength": 1,
            "type": "string"
          },
          "minItems": 1,
          "type": "array",
          "uniqueItems": true
        },
        "data": [
          "/WebServer/react.local/node_modules/webpack-dev-server/client/index.js?http://localhost:3000",
          "webpack/hot/dev-server",
          "webpack-dev-server/client?http://localhost:3000",
          "webpack/hot/dev-server",
          "./src/index.js"
        ]
      }).
      [non-empty string]
    * configuration.entry should be an instance of function
      function returning an entry object or a promise..
 - configuration.module.loaders[0] has an unknown property 'plugins'. These properties are valid:
   object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }
 - configuration.resolve has an unknown property 'root'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
 - configuration.resolve.extensions[0] should not be empty.
 - configuration.resolveLoader has an unknown property 'moduleTemplates'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
 - configuration.resolveLoader.extensions[0] should not be empty.

Гуглил, пробовал по разному решить проблему, но не победил. Повторюсь, этой теме новичок. Подскажите, в чем может быть проблема?

READ ALSO
Как я могу получить имя владельца номера телефона? В google и facebook, используя php или javascript [требует правки]

Как я могу получить имя владельца номера телефона? В google и facebook, используя php или javascript [требует правки]

Я разрабатываю приложение в cordovaЭто приложение может читать телефонные номера из контактов в телефоне

252
Неправильно удаляются элементы

Неправильно удаляются элементы

После ввода N количества элементов, они добавляются в DOM-дерево и в массивПри нажатии на крестик справа у элемента, должен удалятся именно...

206
Не могу решить проблему со слайдером Swipe на мобильных устройствах

Не могу решить проблему со слайдером Swipe на мобильных устройствах

Слайдер — весь сайтНа десктопе работает отлично, при стандартной инициализации

396
почему не срабатывает событие в HTML?

почему не срабатывает событие в HTML?

Столкнулась с очень интересной проблемойВ работе мы используем web

221