angular - webpackJsonp δεν ορίζεται μετά την ανάπτυξη στο Azure

Παρακολουθώ το σεμινάριο «tour of heroes» του Angular και σκέφτηκα ότι ήταν καλή ιδέα να χρησιμοποιήσω το webpack μαζί με αυτό.

Τοπικά η εφαρμογή μεταγλωττίζεται σωστά και εκτελείται χωρίς πρόβλημα.

Το αποθετήριο φιλοξενείται στο Visual Studio TeamServices και μετά από κάθε commit ενεργοποιείται μια διαδικασία κατασκευής. Η κατασκευή φαίνεται επίσης να εκτελείται κανονικά:

Command: deploy.cmd
Handling node.js deployment.
KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
Copying file: 'package.json'
Copying file: 'tsconfig.json'
Looking for app.js/server.js under site root.
Node.js versions available on the platform are: 0.6.20, 0.8.2, 0.8.19, 0.8.26, 0.8.27, 0.8.28, 0.10.5, 0.10.18, 0.10.21, 0.10.24, 0.10.26, 0.10.28, 0.10.29, 0.10.31, 0.10.32, 0.10.40, 0.12.0, 0.12.2, 0.12.3, 0.12.6, 4.0.0, 4.1.0, 4.1.2, 4.2.1, 4.2.2, 4.2.3, 4.2.4, 4.3.0, 4.3.2, 4.4.0, 4.4.1, 4.4.6, 4.4.7, 4.5.0, 4.6.0, 4.6.1, 5.0.0, 5.1.1, 5.3.0, 5.4.0, 5.5.0, 5.6.0, 5.7.0, 5.7.1, 5.8.0, 5.9.1, 6.0.0, 6.1.0, 6.2.2, 6.3.0, 6.5.0, 6.6.0, 6.7.0, 6.9.0, 6.9.1, 6.9.2, 6.9.4, 6.9.5, 6.10.0, 7.0.0, 7.1.0, 7.2.0, 7.3.0, 7.4.0, 7.5.0, 7.6.0, 7.7.4, 7.10.0, 8.0.0.
Selected node.js version 6.1.0. Use package.json file to choose a different version.
Selected npm version 3.8.6
Updating iisnode.yml at D:\home\site\wwwroot\iisnode.yml
Invalid start-up command "webpack-dev-server --inline --progress --port 8080" in package.json. Please use the format "node <script relative path>".
Missing server.js/app.js files, web.config is not generated
[email  D:\home\site\wwwroot
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
`-- [email  
npm WARN notsup Not compatible with your operating system or architecture: [email 

npm WARN optional Skipping failed optional dependency /karma/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email 
npm WARN [email  No repository field.
Finished successfully.

Ωστόσο, όταν εκτελώ την εφαρμογή λαμβάνω το ακόλουθο σφάλμα στη ροή πρωτοκόλλου:

ReferenceError: webpackJsonp is not defined
at Object.<anonymous> (D:\home\site\wwwroot\dist\app.js:1:63)
at Module._compile (module.js:446:26)
at Object..js (module.js:464:10)
at Module.load (module.js:353:31)
at Function._load (module.js:311:12)
at Module.require (module.js:359:17)
at require (module.js:375:17)
at Object.<anonymous> (D:\Program Files (x86)\iisnode\interceptor.js:459:1)
at Module._compile (module.js:446:26)
at Object..js (module.js:464:10)

Σύμφωνα με το https://github.com/webpack/webpack/issues/368, τα αρχεία μπορεί να φορτωθούν σε λανθασμένη σειρά, αλλά αυτό θα σήμαινε ότι θα πρέπει να αποτύχει και τοπικά, κάτι που δεν συμβαίνει.

Αυτό είναι το webpack.common.config μου:

module.exports = {
    entry: {
        "polyfills": "./src/polyfills.ts",
        "vendor": "./src/vendor.ts",
        "app": "./src/main.ts"
    },

    resolve: {
        extensions: [
            ".js", ".ts", ".less", ".scss"
        ],
        modules: [
            'node_modules'
        ]
    },


    module: {
        loaders: [{
               //omitted
            }]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills'],
            filename: "[name].js",
            minChunks: "infinity"
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
}

Και το webpack.prod.js:

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
  },

  plugins: [
    new webpack.NoErrorsPlugin(),
    //new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      mangle: {
        keep_fnames: true
      }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    })
  ]
});

Τι κάνω λάθος; Αν χρειάζεστε και τον ορισμό της κατασκευής, θα χαρώ να τον επεξεργαστώ και να τον προσθέσω.

Απάντηση #1

Έχει πάρει κάποιο καιρό, αλλά τελικά το κατάλαβα.

Υπήρχαν αρκετά προβλήματα με την ανάπτυξή μου.

Μη έγκυρη εντολή εκκίνησης "webpack-dev-server --inline --progress --port 8080" στο package.json. Παρακαλώ χρησιμοποιήστε τη μορφή "node <σχετική διαδρομή σε script>". Λείπουν τα αρχεία server.js/app.js, το web.config δεν δημιουργείται

Η Azure προσπάθησε να χρησιμοποιήσει npm start, αλλά δεδομένου ότι το webpack-dev-server δεν ήταν διαθέσιμο και η ίδια η εντολή ήταν η λάθος, η δημιουργία απέτυχε και τα πάντα κατέρρευσαν από εκεί και πέρα.

Για αυτό άλλαξα τα σενάρια npm:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "start": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },

Τότε άρχισα να λαμβάνω αρκετά σφάλματα σχετικά με τις ελλείπουσες εξαρτήσεις. Αυτό είχε νόημα μετά την τέταρτη αποτυχημένη προσπάθεια ανάπτυξης, όταν συνειδητοποίησα ότι όλα όσα βρίσκονται κάτω από devDependencies: { } ήταν απαραίτητα στο dependencies: { }, αφού από εκεί παίρνει τις εξαρτήσεις του το npm install --production.

Σε αυτό το στάδιο η κατασκευή πετύχαινε, αλλά έπαιρνα ένα 404. Αυτό διορθώθηκε, αλλά ορίζοντας τη φανταστική διαδρομή για / από site\wwwroot σε site\wwwroot\dist:

Τώρα ο ιστότοπος λειτουργούσε.

Καθήκοντα:

Ορίστε ένα βήμα μετά την ανάπτυξη για τη διαγραφή του φακέλου /node_modules/, καθώς τώρα χρησιμοποιώ 200MB χώρου για μια απλή εφαρμογή Hello World.