Question

我创建了一个非常基本的MVC 5 Angular 2应用程序，如果我使用SystemJS，它可以正常工作。但是，我希望能够捆绑我的代码，以便将其添加到我的BundleConfig文件中，并决定查看Webpack。我已经达到了这样的程度，我可以生成捆绑并将它们保存到磁盘（使用webpack --watch），但是当我将它们包含在我的BundleConfig中时，它不起作用，因为它无法找到组件的模板。

所以问题是：有更好的方法吗？我的意思是 - 我想坚持使用MVC 5，使用Visual Studio（这意味着使用VS Typescript编译器）并能够捆绑我的js / css文件。

我对这个框架（Angular 2 / Webpack等）很陌生，所以如果您需要更多信息，请告诉我。

谢谢！

不确定这会有多大帮助，但这里是webpack配置：

webpack.config.js

module.exports = require('./Config/webpack.dev.js');

webpack.dev.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

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

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

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

    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new ExtractTextPlugin('[name].css'),
        //new webpack.DefinePlugin({
        //    'process.env': {
        //        'ENV': JSON.stringify(ENV)
        //    }
        //})
        //new webpack.LoaderOptionsPlugin({
        //    htmlLoader: {
        //        minimize: false // workaround for ng2
        //    }
        //})
    ]
});

webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './Config/polyfills.js',
        'vendor': './Config/vendor.js',
        'app': './App/main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
            //{
            //    test: /\.ts$/,
            //    loaders: [
            //        {
            //            loader: 'awesome-typescript-loader',
            //            options: { configFileName: helpers.root('', 'tsconfig.json') }
            //        }, 'angular2-template-loader'
            //    ]
            //},
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=Content/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('', 'App'),
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            {
                test: /\.css$/,
                include: helpers.root('', 'App'),
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        // Workaround for angular/angular#11580
        //new webpack.ContextReplacementPlugin(
        //    // The (\\|\/) piece accounts for path separators in *nix and Windows
        //    /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        //    helpers.root('./'), // location of your src
        //    {} // a map of your routes
        //),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        })

        //new HtmlWebpackPlugin({
        //    template: 'Views/Shared/_Layout.cshtml'
        //})
    ]
};

更新只是为了澄清，这是我想要的过程： 1. Visual Studio转换.ts文件（据我所知，没有一种简单的方法可以告诉Visual Studio使用node_modules中的Typescript编译器而不是它自己的）。 2. Webpack从所有已编译的js文件创建捆绑包，这些文件正在运行。 3. BundleConfig使这些包可用。

除了未提供模板文件外，上述过程正在运行。如果我使用内联模板和CSS它可以正常工作。

所以也许更具体的问题是：如何使用webpack来内联添加模板/样式（如果可能的话还是Dunno）或者以组件可以找到并加载它们的方式提供这些文件？ / p>

Answer 1

我能够通过取消注释webpack.common.js文件中的awesome-typescript-loader规则来解决这个问题。使用该插件可以加载模板/样式URL。

Answer 2

你试过这个吗？ https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner

我在当前的Angular项目中使用NPM。我们正在使用Visual Studio Team Services来实现构建和部署自动化。在构建过程中，我使用npm命令添加PowerShell脚本来编译Angular代码。

我正在研究Webpack以及我与Vue.js的下一个项目。它是一个强大的工具，被Facebook等大公司采用。我不会得出任何草率的结论，因为我们已经拥有一个坚实的构建生态系统。

无论如何，你在前端构建进程可以与你的MVC 5代码隔离。在Visual Studio中，你可以使用TypeScript编译器，但我不推荐它，因为在大多数情况下，我们将涉及其他JS / CSS库。 TypeScript编译器不是捆绑，打包和构建的工具。

在MVC 5 Angular 2应用程序中使用Webpack

2 个答案: