Pug Templates not loading with Vue Pug #3646
Comments
|
I've included this in my const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
// the source template
template: 'public/index.pug',
// output as dist/index.html
filename: 'index.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
// chunks: ['chunk-vendors', 'chunk-common', 'index']
}
},
chainWebpack: config => {
const pugRule = config.module.rule('pug');
pugRule.uses.clear();
pugRule
.test(/\.pug$/)
.exclude
.add(/public.*\.pug$/)
.end()
.use('pug-plain-loader')
.loader('pug-plain-loader');
config.module
.rule('publicpugs')
.test(/public.*\.pug$/)
.exclude
.add(/\.vue$/)
.end()
.use('raw')
.loader('raw-loader')
.end()
.use('pug-plain')
.loader('pug-plain-loader')
.end();
}
} |
|
@appsparkler Thanks for the report. After a little investigation I think it's a bug in our configuration - we forgot to use |
|
@sodatea Thank you for your response and solution. I had to make a small tweak to it in my module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
// the source template
template: 'public/index.pug',
// output as dist/index.html
filename: 'index.html',
// when using title option,
// template title tag needs to be <title><%= HtmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
// chunks: ['chunk-vendors', 'chunk-common', 'index']
}
},
configureWebpack: {
plugins: [
...get_HTMLWebpackPluginsToCompilePugs(),
get_PluginToHotReloadIncludedPugs()
]
},
chainWebpack: (...args) => {
add_ruleForVuePlusPugs.apply(null, args);
}
}
// abstracted methods
function get_HTMLWebpackPluginsToCompilePugs() {
const HtmlWebpackPlugin = require('html-webpack-plugin');
const glob = require('glob');
const plugins = [];
try {
glob.sync('src/**/*.pug').forEach(templatePath => {
const destPath = templatePath.replace('src/', '').replace('.pug', '.html');
plugins.push(new HtmlWebpackPlugin({
template: templatePath,
filename: destPath,
base: 'dist',
inject: false
}));
});
} catch (e) {
throw e;
}
return plugins;
}
function add_ruleForVuePlusPugs(webpackConfig) {
const pugRule = webpackConfig.module.rule('pug');
pugRule.uses.clear();
pugRule
.test(/\.pug$/)
.oneOf('pug-vue')
.resourceQuery(/vue/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end()
.end()
.oneOf('pug-template')
.use('raw')
.loader('raw-loader')
.end()
.use('pug-plain')
.loader('pug-plain-loader')
.end()
.end()
}
function get_PluginToHotReloadIncludedPugs() {
const LiveReloadPlugin = require("webpack-livereload-plugin");
return new LiveReloadPlugin({
appendScriptTag: true
});
} |
Version
3.5.1
Reproduction link
https://github.com/appsparkler/aem-webapp
Environment info
Steps to reproduce
npm run serveWhat is expected?
dev server with application
What is actually happening?
λ npm run serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 errors 7:25:12 PM
Error: Child compilation failed:
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
The text was updated successfully, but these errors were encountered: