Question

我有一个aspnet核心+ angular2 + webpack项目。我无法使用webpack-dev-server的livereload部分。我认为问题可能是因为使用剃刀模板。开发服务器需要一个从不存在的普通index.html。

var webpack = require('webpack');
const path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: {
    polyfills: './wwwroot/polyfills.ts',
    vendor: './wwwroot/vendor.ts',
    app: "./wwwroot/main.ts"

},
output: {
    publicPath : '/lib/webpack',
    path:'wwwroot/lib/webpack',
    filename: '[name].[hash].build.js'
},

resolve: {
    extensions: ['.ts', '.js']
},

devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, '/wwwroot/'),
    proxy: {
        '*': 'http://localhost:5000'
    },
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    }
},

module: {
    rules: [
        {
            test: /\.ts$/,
            loaders: ['ts-loader?ConfigFileName=./wwwroot/tsconfig.json', 'angular2-template-loader']

        },
        {
            test: /\.css$/,
            loaders: 'style-loader!css-loader'
        },
        {
            test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
            loader: 'url-loader'
        },
        {
            test: /\.(html)$/,
            loader: 'raw-loader'
        }
    ]
},

plugins: [

    new CleanWebpackPlugin(
        [
            './wwwroot/lib/webpack'
        ]
    ),

    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    }),

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

    new HtmlWebpackPlugin({
        inject: false,
        template: 'Views/Shared/_layoutTemplate.cshtml',
        filename: '../../../Views/Shared/_layout.cshtml'
    }),
]

}

开发服务器运行，然后运行dotnet项目。结果是我可以因为代理而渲染页面。但是dev服务器不会在该渲染视图中注入它的livereload代码。因此，当我做更改时，我必须手动重新加载。

如何告诉dev服务器使用该.cshtml文件？或者我怎样才能实现它？

谢谢。

带有剃刀模板引擎的webpack dev服务器（angular2 - netcore）

0 个答案: