我該如何設置Webpack，Angular 2.0和Django在一起？

我目前正在嘗試設置一個webpack，angular 2.0和django堆棧，並試圖與所有的部分一起工作有點混亂。我該如何設置Webpack，Angular 2.0和Django在一起？

我正在使用NPM來處理庫。

這裏有錯誤，當我嘗試編譯打字稿使用Django加載：

      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'

這裏是我的tsconfig.json文件

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

我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" 
    } 
}

我的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'] 
     }) 
    ] 
};

最後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' 
    } 
});

來源

2016-07-28 bischoffingston