Visual Studio 2015とWebpackでPugを使用

Question

私はVisual Studioを使ったことが比較的新しいですが、私が取り組んでいるプロジェクトは.cshtmlの複数のページを持つWebサイトです。私はWebpackをフロントエンドビルドツールとしてセットアップし、Pugをテンプレートエンジンとして使用したいと考えています。ビルドツールでPugテンプレートをHTMLにコンパイルし、Visual Studioでコンパイルするのではなく（PugViewEngineなどを使用して）、依存関係を低く保つことは、私にとって意味があります。

私は/pugフォルダを作成し、プレーンテキストとして任意のカミソリの構文で.pugファイルとしてそこにビューを再構築を開始すべき - そして.cshtmlファイル拡張子をHTMLにコンパイルするのWebPACKを使用して/Viewsフォルダに戻ってそれをダンプのVisual Studioプロジェクトの - またはこれにアプローチするより良い方法はありますか？

Answer 1

html-webpack-plugin,pug-loader、copy-webpack-pluginを利用してこれを実現できました。

1）あなたのwebpack.config.jsの上部にある2プラグインを必要とするようにしてください：

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 

2）次に、あなたの/srcフォルダにhtml-webpack-plugin参照あなたのindex.pugテンプレートを持っている：

plugins: [ 
    new HtmlWebpackPlugin({ 
    template: './src/index.pug', 
    }) 
] 

3）次にpug-loaderモジュールで.pugファイルを処理させます：

module: { 
rules: [ 
    { 
    test: /\.pug$/, 
    use: 'pug-loader' 
    } 
] 
} 

4）次にcopy-webpack-pluginを使用して、/distフォルダからコンパイルしたHTMLファイルをVisual Studioがリファインする/Views/フォルダに移動します。 .cshtmlにあなたが喜ば何にファイル名とファイル拡張子を変更します。

plugins: [ 
new CopyWebpackPlugin([ 
    { 
    from: 'dist/index.html', 
    to: '../../Views/Shared/_layout.cshtml' 
    } 
]) 
] 

5）あなたは|記号でプレーンテキストとして扱うことができ、あなたの.pugテンプレート内の任意のかみそりの構文：

| @Html.AntiForgeryToken(); 

ありかもしれませんよりクリーンな方法ですが、一度セットアップすれば、私はよりクリーンなフロントエンドプロセスに移行するので、今すぐかなり簡単で、私のプロジェクトでうまくいきます。