Wie richte ich Webpack, Angular 2.0 und Django zusammen?

Ich versuche gerade ein Setup ein Webpack, eckig 2.0 und Django-Stack und versuchen, mit allen Teilen zusammen zu arbeiten ist ein bisschen verwirrend.Wie richte ich Webpack, Angular 2.0 und Django zusammen?

Ich verwende NPM, um die Bibliotheken zu behandeln.

Hier sind die Fehler, wenn ich versuche, das Typoskript zu kompilieren mit django zum Laden:

      Asset  Size Chunks    Chunk Names 
    main-71f084fe9f6c4015034a.ts 5.09 MB 0, 1, 2 [emitted] main 
    app-71f084fe9f6c4015034a.ts 23 bytes  1, 2 [emitted] app 
vendor-71f084fe9f6c4015034a.ts 3.6 kB  2, 1 [emitted] vendor 
    + 329 hidden modules 

ERROR in /home/bischoff_s/Code/optim/typings/globals/webpack-env/index.d.ts 
(176,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'RequireFunction'. 

ERROR in /home/bischoff_s/Code/optim/typings/globals/webpack-env/index.d.ts 
(225,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'module' must be of type 'NodeModule', but here has type 'Module'

Hier ist meine tsconfig.json Datei

{ 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "removeComments": false, 
     "noImplicitAny": false, 
     "suppressImplicitAnyIndexErrors": true 
    } 
}

Mein typings.json

{ 
    "globalDependencies": { 
     "core-js": "registry:dt/core-js#0.0.0+20160602141332", 
     "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 
     "node": "registry:dt/node#6.0.0+20160621231320" 
    } 
}

Mein webpack.common.js

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
module.exports = { 
    entry: { 
     'vendor': './assets/js/vendor.ts', 
     'app': './assets/js/index.ts' 
    }, 
    entry: './assets/js/index.ts', 
    resolve: { 
     extensions: ['', '.js', '.ts'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loaders: ['ts', 'angular2-template-loader'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       loader: 'file?name=assets/[name].[hash].[ext]' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app', 'vendor'] 
     }) 
    ] 
};

und schließlich webpack.dev.js

var path = require("path") 
var webpackMerge = require('webpack-merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var commonConfig = require('./webpack.common.js'); 
var BundleTracker = require('webpack-bundle-tracker'); 
module.exports = webpackMerge(commonConfig, { 
    devtool: 'cheap-module-eval-source-map', 
    output: { 
     path: path.resolve('./assets/bundles/'), 
     filename: "[name]-[hash].ts", 
    }, 
    plugins: [ 
     new ExtractTextPlugin('[name].css'), 
     new BundleTracker({filename: './webpack-stats.json'}) 
    ], 
    devServer: { 
     historyApiFallback: true, 
     stats: 'minimal' 
    } 
});

Quelle

2016-07-28 bischoffingston