在Visual Studio 2015和Webpack中使用Pug

我对使用Visual Studio相对比较陌生，但我正在开发的项目是一个网页，其中有多个页面，文件号为.cshtml。我已经将Webpack设置为前端构建工具，并且希望开始使用Pug作为模板引擎。构建工具将帕格模板编译为HTML并保持较低的依赖关系比使用Visual Studio编译它们更有意义（使用类似PugViewEngine的东西）。在Visual Studio 2015和Webpack中使用Pug

我应该创建一个/pug文件夹，并开始重新建设的意见，在那里为.pug文件与任何剃刀语法为纯文本 - 再使用的WebPack编译与.cshtml文件扩展HTML和转储它放回/Views文件夹Visual Studio项目 - 还是有更好的方法来解决这个问题吗？

来源

2017-04-06 Dan Christian

PugViewEngine不是最终破解和无人维护的存储库中的一个选项。 –

我设法通过利用html-webpack-plugin,pug-loader和copy-webpack-plugin得到这个工作。

1）确保需要2插件在你webpack.config.js的顶部：

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

2）然后有html-webpack-plugin参考您index.pug模板您/src文件夹：

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

3）然后让pug-loader模块处理您的.pug文件：

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

4）然后使用copy-webpack-plugin将已编译的HTML文件从您的/dist文件夹移动到将要折叠Visual Studio的/Views/文件夹中。文件名，无论你取悦和文件扩展名更改为.cshtml：

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

5）在.pug模板任何剃刀语法，你可以以纯文本与|符号治疗：

| @Html.AntiForgeryToken();

可能存在做一个更干净的方法，但是一旦建立起来，它非常简单，现在可以为我的项目工作，因为我们正在转向更清洁的前端流程。

来源

2017-04-12 10:15:33

在Visual Studio 2015和Webpack中使用Pug

回答

相关问题