Comments (7)
I see. Thanks so much for all of your help!
from pug-loader.
Hello @mjlbach,
Thank You for the reporting of the issue.
I try to reproduce it.
P.S. You could greatly speed up the solution of the problem if you created a small repo with a reproducible issue.
from pug-loader.
I will help you but I can't reproduce an issue.
I have created the example simple multiple pages.
Can you please create a small repo based on this example to reproduce a problem.
Describe please:
- Current behaviour
- Expected behaviour
Clarification
Entry
The key of the entry object is the output filename (without .html
extension) relative to output.path
.
For details see entry-syntax.
entry: {
index: './src/app/home/index.pug', // output ./dist/index.html
people: './src/app/people/index.pug', // output ./dist/people.html
// output a generated HTML file to sub directory
'pages/research': './src/app/research/index.pug', // output ./dist/pages/research.html
},
Output
output: {
filename: 'app/[name].bundle.js', // don't define it here, this is the same as Plugin option `js.filename`
path: path.resolve(__dirname, 'dist'),
publicPath: 'auto' // default is always `auto`, can be omited
},
file-loader
Note: the file-loader
is deprecated and in Webpack 5 is replaced with asset/resource
, see the asset-modules.
Use the asset module asset/resource
:
{
test: /font-awesome\/.+\/.+\.(eot|svg|ttf|otf|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
type: 'asset/resource',
generator: {
// output filename of fonts
filename: 'assets/fonts/[name][ext][query]',
},
}
from pug-loader.
Thank you so much for the repro and the proactive suggestions on cleaning up our config! It was a hard migration with the webpack upgrades as well haha.
When I use your repo, I can reproduce the problem:
with npm start
with npm run build && cd dist && npx serve
Then apply this patch:
diff --git a/examples/simple-multipage/src/views/home/index.pug b/examples/simple-multipage/src/views/home/index.pug
index c9c34ac..fcc7b21 100644
--- a/examples/simple-multipage/src/views/home/index.pug
+++ b/examples/simple-multipage/src/views/home/index.pug
@@ -9,7 +9,7 @@ html
body
h1 Home
div.nav
- a(href="about.html") About
+ a(href="about") About
span  | 
- a(href="contact.html") Contact
+ a(href="contact") Contact
img(src=require('Images/apple.png') alt="apple")
with npm start
with npm build && cd dist && npx serve
from pug-loader.
ah, now I understand your problem.
According to the Web Standards Specification:
- the URL with end
.html
is a static HTML file - the URL with end
/
or without.html
is a web path (directory), where must be theindex.html
file
If you need to have a URL as a web path (without .html
), then change in the Webpack entry:
entry: {
// define URL: https://example.com (real URL: https://example.com/index.html)
index: 'src/views/home/index.pug', // => dist/index.html
// define URL: https://example.com/contact.html
contact: 'src/views/contact/index.pug', // => dist/contact.html
// define URL: https://example.com/about (real URL: https://example.com/about/index.html)
'about/index': 'src/views/about/index.pug', // => dist/about/index.html
},
from pug-loader.
Ah I had tried this before and thought it was a hack! Good to hear this is the recommended solution :)
I was confused because when I build/serve the site with cloudflare (and npx serve) it still works without changing the above, and with our previous setup (using html-webpack-plugin) webpack-dev-server it also worked. Do you know what might have changed?
from pug-loader.
It was a "magic" of a web-server (cloudfare has non-standard configuration to allow more flexibility).
Just follow Web Standards to avoid unexpected problems ;-)
from pug-loader.
Related Issues (20)
- Failed to build when webpack alias for asset is an array of paths instead of a single path HOT 5
- [CRITICAL] [SECURITY] Pug variables leak between different executions of rendered templates HOT 10
- Path errors on Windows? HOT 6
- How to use it with tailwindcss and server side rendering? HOT 13
- [Bug] Pug error in dependency requires restart of webpack HOT 9
- Support resolving modules HOT 1
- Compile error on bad JS Syntax is confusing HOT 3
- Support Webpack defined modules HOT 4
- Missing peer dependency pug-walk HOT 3
- Cannot read properties of undefined (reading 'sync') in @webdiscus\pug-loader\src\Resolver.js HOT 2
- Vue production build errors in example HOT 6
- hello-world-app does not compile HOT 3
- Doesn't fix indent pug with @webdiscus/pug-loader on nuxt 3 (vite) HOT 3
- Will this support pug3? HOT 2
- Improve the error message to find where the error occurred HOT 2
- `include` doesn't use dynamic `resolve.alias` (from tsconfig-paths-webpack-plugin) HOT 11
- img srcset attribute HOT 3
- htmlWebpackPlugin.options not available in pug template HOT 10
- Errors don't show the exact location of the error HOT 15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pug-loader.