2
我創建了一個非常基本的MVC 5 Angular 2應用程序，如果使用SystemJS，它可以正常工作。但是，我希望能夠捆綁我的代碼，以便將其添加到我的BundleConfig文件中，並決定查看Webpack。我已經知道它可以生成捆綁包並將它們保存到磁盤（使用webpack --watch），但是當我將它們包含在我的BundleConfig中時，它不起作用，因爲它無法找到組件的模板。在MVC 5 Angular 2應用程序中使用Webpack
所以問題是：有沒有更好的方法來做到這一點？我的意思是 - 我想堅持使用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 transpiles .ts文件（據我所知，沒有一種簡單的方法可以告訴Visual Studio使用Typescript編譯器node_modules代替它自己）。 2. Webpack從所有正在運行的傳輸js文件創建包。 3. BundleConfig使這些軟件包可用。
上述過程正在工作，但模板文件沒有被提供。如果我使用內聯模板和css，它工作得很好。
所以，也許一個更具體的問題是：如何使用webpack添加模板/樣式內聯（如果甚至可能，請不要使用）或者以組件可以找到並加載它們的方式提供這些文件？
嘿，你有一個甜蜜的github回購我們可以分叉？ –