MVC 5 Angular 2アプリケーションでWebpackを使用

Question

私はSystemJSを使用するとうまく動作する非常に基本的なMVC 5 Angular 2アプリを作成しました。しかし、コードをバンドルしてBundleConfigファイルに追加してWebpackを調べることにしました。バンドルを生成してディスクに保存することができます（webpack -watchを使用して）が、BundleConfigにバンドルを含めると、コンポーネントのテンプレートを見つけることができないため、バンドルが動作しません。

質問があります：これを行うより良い方法はありますか？私が意味するのは、MVC 5に固執し、Visual Studio（VS Typescriptコンパイラを使用することを意味します）を使用し、js/cssファイルをバンドルできるようにしたいということです。

私はこのフレームワーク（Angular 2/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：ここ

ない、これは可能だろうか役立つ確かだがWebPACKのコンフィグあります。 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にTypescriptコンパイラを使用するように指示する簡単な方法はありません）。自身の代わりにnode_modules）。 2. Webpackは、動作中のすべてのjilファイルからバンドルを作成します。 3. BundleConfigは、バンドルを使用可能にします。

上記のプロセスは、テンプレートファイルが提供されていないことを除いて動作しています。インラインテンプレートとCSSを使用するとうまくいきます。

もっと具体的な質問です：webpackを使用してテンプレート/スタイルをインライン（Dunnoでも可能です）するか、コンポーネントが見つけてロードできるように提供するにはどうすればよいですか？

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コマンドを使ってAngularコードをコンパイルすることでPowerShell Scriptを追加しました。

私はVue.jsで私の次のプロジェクトのWebpackも勉強しています。これは強力なツールであり、Facebookなどの大企業で採用されています。私たちはすでに確固たるビルドエコシステムを持っているので、急いで結論を出しません。

とにかくフロントエンドのプロセスをMVC 5コードから分離することができます。Visual Studioでは、TypeScriptコンパイラを使うことができますが、ほとんどの場合、私たちは他のJS/CSSライブラリ関与する。 TypeScriptコンパイラは、バンドル、パッケージング、ビルドのためのツールではありません。