如何一起设置 Webpack、Angular 2.0 和 Django？答案

【问题标题】：How do I set up Webpack, Angular 2.0, and Django together?如何一起设置 Webpack、Angular 2.0 和 Django？
【发布时间】：2016-12-03 02:12:11
【问题描述】：

我目前正在尝试设置 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
    }
}

我的打字.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'
    }
});

【问题讨论】：

标签： node.js django angular typescript webpack

【解决方案1】：

这是来自不同 webpack-env 和节点的不同类型的问题。这是答案的参考链接。

TypeScript error on compilation with webpack

【讨论】：