[英]Webpack - linking other Pug pages on webpack-dev-server doesn't work
我正在重建自己的网站,我想在页面之间添加一些过渡。
在此示例中,我的src
文件夹中有两个pug
文件: 在index.pug
,我有一行代码( a(href='./about') Go to about
)应该链接到about
网页。 相反,我收到此错误cannot get /
。
如果我将其更改为( a(href='./about.html Go to about
)并在生产中运行它,一切都会顺利进行。
我的文件夹结构是:
dist/
+-- index.html
+-- about.html
+-- main.css
+-- main.bundle.js
+-- vendor.bundle.js
node_modules/
src/
+-- partials/
+-- sass/
+-- index.pug
+-- about.pug
+-- index.js
+-- vendor.js
+-- main.scss
.gitignore
package-lock.json
package.json
webpack.common.js
webpack.dev.js
webpack.prod.js
webpack.common.js
const path = require('path');
//const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js',
vendor: './src/vendor.js'
},
//plugins: [
// new HtmlWebpackPlugin({
// template: './src/index.pug'
// })
//],
module: {
rules: [
{
test: /\.(svg|png|jpe?g|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'images/[hash][ext][query]',
}
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
}
};
webpack.prod.js
const path = require('path');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = merge(common, {
mode: 'production',
output: {
filename: '[name].[contenthash].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
minimizer: [
new TerserPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.pug",
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true
}
}),
new HtmlWebpackPlugin({
template: "./src/about.pug",
filename: 'about.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true
}
})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}),
new CleanWebpackPlugin()
],
module: {
rules: [
{
test: /\.pug$/,
use: [
{
loader: 'simple-pug-loader'
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, //3. Creates separate CSS file
'css-loader', //2. Turns css into js
'sass-loader' //1. Turns sass into css
]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
// Using file-loader will create another set of images and will link to the wrong images
// As of Webpack 5.0, this can be handled without installing a loader at all. So file-loader, url-loader, raw-loader, etc. are now obsolete.
// https://stackoverflow.com/questions/69147962/file-loader-creating-2-images-and-linking-the-wrong-one
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
}
}
]
}
]
},
});
webpack.dev.js
const path = require('path');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const LiveReloadPlugin = require('webpack-livereload-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.pug$/,
use: [
{
loader: 'simple-pug-loader'
}
]
},
{
test: /\.scss$/,
use: [
'style-loader', //3. Injects css into the DOM
'css-loader', //2. Turns css into js
'sass-loader' //1. Turns sass into css
]
},
]
},
devServer: {
hot: true,
liveReload: true,
open: 'Google Chrome'
},
plugins: [
new LiveReloadPlugin({ // LiveReloadPlugin is necessary in order to fix live reloading on the dev side
appendScriptTag: true
}),
new HtmlWebpackPlugin({
template: './src/index.pug'
}),
new HtmlWebpackPlugin({
template: './src/about.pug'
})
]
});
我尝试在HtmlWebpackPlugin
的webpack.dev.js
中添加一个新template
(这在production
中有效),但它只显示localhost:8080
中的about
页面,然后出现此错误:
Compiled with problems:X
ERROR
Conflict: Multiple assets emit different content to the same filename index.html
谷歌搜索后修复它。 原来我正在输出到相同的 index.html 文件。 为 webpack.dev.js 中的每个 HtmlWebpackPlugin 添加不同的文件名解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.