WebPack 2.1 Intro Tutorial nicht importieren Umwandlung

Question

ich nach dem Intro Tutorial bin zu webpack 2.1 auf https://webpack.js.org/get-started/

Es ist einfach und ziemlich schnell, aber das erzeugte Bündel nicht import _ from 'lodash'; zu etwas konvertiert - es geschrieben ist enthalten als - Ich erhalte einen Fehler in meinem Webbrowser, wenn ich die Seite index.html öffne.

Ich habe versucht die folgenden Pakete hinzuzufügen:

• babel-loader
• babel-Kern
• babel-Preset-es2015

Und ich versuchte, das Modul hinzugefügt hier anzumerken : https://webpack.js.org/concepts/#loaders

Nichts davon ändert die Ausgabe. Ich habe auch ein paar andere Kleinigkeiten ausprobiert, möchte aber so konzentriert wie möglich bleiben.

Hauptfrage: Funktioniert dieses Lernprogrammbeispiel wie geschrieben?

Secondary Frage: Wenn nicht, wie es zu beheben ...

Answer 1

Vergewissern Sie sich, dass Sie Webpack 2 installiert haben, das sich noch in der Beta befindet.

Wenn Sie npm install --save-dev webpack ausführen, erhalten Sie ab sofort das Webpack 1, das die ES6-Importe nicht selbst unterstützt. Dies ist eine neue Funktion von Webpack 2.

Sie können überprüfen, welche webpack Version mit installiert haben:
./node_modules/.bin/webpack -v

Answer 2

Wenn Sie ein Tutorial möchten, die mit webpack bekommt man wirklich vor sich geht, tun diese funktioniert und:

http://webpack.github.io/docs/tutorials/getting-started/

Ich wäre misstrauisch gegenüber einem Tutorial, das lodash enthält, denn das bringt dich ziemlich schnell aus dem Bereich des "Einstiegs" (ich habe nichts gegen lodash, aber was hat es mit webpack hallo world zu tun).

Auch ich denke, was Sie versuchen, kann script_loader beinhalten. Aber wieder, bleib bei dem Tutorial-Link, den ich oben gepostet habe. Wenn Sie fertig sind, werden Sie sehen, wie Sie externe Skripts und ähnliches einbinden können.

Answer 3

In der webpack.config.js Datei, das Hinzufügen des bearbeiteten folgende:

module: { 
    loaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ] 
    } 

Wenn Sie das Tutorial folgen, müssen Sie auch die folgenden Pakete hinzufügen (anscheinend), wie sie https://github.com/babel/babel-loader (Dies beschrieben Thema ist hier berührt https://webpack.js.org/concepts/#loaders aber ich kann nicht herausfinden, ob es die neueste Version gegeben veraltet ist oder wenn es nicht aus einem anderen Grund)

npm install babel-loader babel-core babel-preset-es2015 --save-dev

die ganze comple arbeitete Die Datei webpack.config.js sieht folgendermaßen aus:

module.exports = { 
    entry: './app/index.js', 
    output: { 
    filename: 'bundle.js', 
    path: './dist' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ] 
    } 
};