Komenda 'webpack' - problem z kompilacją

Question

var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
};

Mam problem z kompilacją. Po wpisaniu komendy webpack pojawia się błąd:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

Czy ktoś wie co może być przyczyną? Postępuję zgodnie z tutorialem na YT, dokładnie krok po kroku, ale mimo wszystko pojawia się błąd.

Comments

Którą wersję webpacka masz? Podaj link do tego tutoriala na YouTube - może masz inną wersję niż autor filmiku.

Podałeś property "loaders", które jest nieznane:

unknown property 'loaders'.

---

https://webpack.js.org/concepts/loaders/#configuration

https://nodejs.org/docs/latest/api/path.html#path_path_resolve_paths

---

Podaję link to tutoriala: https://www.youtube.com/watch?v=f7TmMBMLJ90&index=3&list=PL4cUxeGkcC9i0_2FF-WhtRIfIJ1lXlTZR

A u siebie mam zainstalowaną najnowszą wersję nodejs, a webpacka zainstalowałem poprzez poprzez komendę npm install webpack webpack-dev-server. Nie mam teraz możliwości sprawdzić jaka wersją się zainstalowała, ale zakładam że najnowsza.

 

---

@Tnifey,

Są małe różnice w konfiguracji pomiędzy moim plikiem, a tym co przesłałeś w linkach. Ale nie potrafię znaleźć przyczyny błędu. Masz jakiś pomysł?

 

---

jeśli zamienisz 

    module: {
        loaders: [

na 

    module: {
        rules: [

powinno zadziałać. Gdy instalujesz coś poleceniem npm install wersja zainstalowanej paczki powinna zapisać się w pliku package.json jeśli nie masz takiego pliku powinieneś go stworzyć w folderze z swoim projektem poleceniem npm init

---

Zamiana loaders na rules pomogła :) Teraz komenda webpack robi co powinna. Dziękuję za pomoc!

Jak wspomniałem wcześniej postępuje zgodnie z tutorialem więc dlaczego u autora filmu wszystko działało, a u mnie nie?

---

@rafal612b, Może i w tej kwestii coś doradzisz?

webpack-dev-server nie działa - przesyłam błąd z npm + konfigurację

//package.json

...  
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 8080"
  },
....

Następnie komenda npm start i na koniec pojawia się błąd 

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
i ｢wdm｣: Compiled with warnings.

 

Hash: 4333b0e8da46a46875ad
Version: webpack 4.0.0
Time: 1219ms
Built at: 2018-2-27 22:16:47
    Asset      Size  Chunks             Chunk Names
bundle.js  3.26 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/app/index.js] 57 bytes {main} [built]
(node:5676) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from C:\Users\Rafal\Desktop\Coding\The Net Ninja - React tutorial\react-playlist\src ‼ ｢wdm｣: Hash: c24ff8816d24aa515c94
Version: webpack 4.0.0
Time: 21941ms

Built at: 2018-2-27 22:17:01
    Asset     Size  Chunks             Chunk Names
bundle.js  147 KiB       0  [emitted]  main
Entrypoint main = bundle.js
   [0] (webpack)/hot/log.js 1.03 KiB {0} [built]
   [1] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [4] ./src/app/index.js 57 bytes {0} [built]
   [5] (webpack)/hot/log-apply-result.js 1.31 KiB {0} [built]
   [6] (webpack)/hot/dev-server.js 1.66 KiB {0} [built]
   [8] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [12] ./node_modules/ansi-html/index.js 4.16 KiB {0} [built]
  [13] (webpack)-dev-server/client/overlay.js 3.58 KiB {0} [built]
  [14] ./node_modules/sockjs-client/dist/sockjs.js 176 KiB {0} [built]
  [15] (webpack)-dev-server/client/socket.js 1.05 KiB {0} [built]
  [16] ./node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} [built]
  [18] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [25] ./node_modules/url/url.js 22.8 KiB {0} [built]
  [26] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {0} [built]
  [27] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app/index.js 52 bytes {0} [built]
    + 13 hidden modules

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
i ｢wdm｣: Compiled with warnings.
i ｢wdm｣: Compiling...
i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: wait until bundle finished: /
‼ ｢wdm｣: Hash: 9afba1a7709477c1ffe9
Version: webpack 4.0.0
Time: 21638ms
Built at: 2018-2-27 22:18:00

 

A tutaj to co pokazuje konsola gdy wejdę w localhost:8080:

 

Failed to load resource: the server responded with a status of 404 (Not Found)  bundle.js

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

d2xvc2nqkduarq.cloudfront.net/zr/js/adrns_c.js#N-S7LgoI4jV6PeAr473MUHjNIBn5Gn2dae

---

Moze zainstaluj starszą wersje np

npm install webpack@2.0.0 lub spróbuj ustalić z jakiej wersji korzysta autor tutoriala. Sam dev-serwerem nie bawiłem się wcale więc niestety nie pomoge.