Webpack nicht Bundle-Datei auf npm Laufe

Question

Grüße samt und sonders,

Nach einer Reaktion gemacht zu haben Anwendung erzeugen, entschied ich mich in tiefer in Webpack zu tauchen. Ich bin ziemlich neu in der ganzen npm Automatisierungsszene und nachdem ich ein Kochbuch und verschiedene Tutorials befolgt habe, kann ich einfach nicht npm run dev meine Anwendung bündeln lassen. Es erzeugt ein bundle.js völlig in Ordnung, wenn ich webpack ausführen, aber was mich ansprach, war, dass Webpack eine physische Datei erzeugt, wann immer ich etwas ändere. Gulp und Grunt können das für mich machen, aber ich würde es gerne mit dem Webpack arbeiten lassen.

Also, ohne weiteres, einige Code. Ich betreiben npm run dev, die wie so (package.json, nur die Skripte Teil *) definiert ist:

"scripts": { 
    "build": "webpack", 
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" 
    } 

Mit folgenden Webpack Konfiguration:

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    entry: path.resolve(__dirname, 'src/js/main.js'), 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: '/js/bundle.js', 
     publicPath: '/' 
    }, 
    devServer: { 
     inline: true, 
     contentBase: './dist' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ResolverPlugin([ 
       new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) 
      ], ["normal"], "loader") 
    ] 
}; 

Hüllen: webpack: Bundles meiner Anwendung in dist/js /bundle.js vollkommen in Ordnung. webpack-dev-server: Scheint, ein Speicherpaket aus meinem JS perfekt zu streamen, aber erzeugt kein Bündel auf der Festplatte. npm run dev: Startet den Webpack-Server, führt aber weder zu einem Bundle, noch wird meine Anwendung ausgeführt, was zu einem Can not GET/ Fehler führt.

Kann mir jemand in die richtige Richtung zeigen? Ich habe versucht, Variationen der Config, aber ohne Erfolg .. Und nur vollständig zu sein, werde ich meine Verzeichnisstruktur zeigen:

./project 
    ./dist 
     ./js 
      ./bundle.js 
    ./src 
     ./js 
      ./main.js 
./package.json 
./webpack.config.js 

Noch einmal vielen Dank für die helfen!

Answer 1

Es liegt an falsch geschriebenen Skripten in package.json Datei. Ersetzen Sie Ihre Skripte durch die folgenden. Dies liegt daran, dass Sie nicht den korrekten Pfad zu Ihrer Datei "bundle.js" angeben, die erstellt werden muss. "-p" bedeutet, die Eingangs- und Ausgangsschlüssel von webpack.config.js zu lesen. Dann diesen cmd läuft: $ npm run build

"scripts": { 
    "build": "webpack -p", 
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" 
    } 

Answer 2

Für mich war das Problem mit package.json unter, dass "Skripte"

Hier ist das Update:

In Ihrer package.json Datei unter Skript hinzufügen die folgenden:

"Skripte": {
"Start": "webpack-dev-Server",
"bauen": " webpack -p " }

Zuerst habe ich den Build dann starten.

Garn build

, wenn Sie zuerst dann Ihr Bündel bauen.js-Datei erstellt und danach können Sie diesen Befehl verwenden:

Garn beginnen

Statt Garn, können Sie auch npm