如何防止在 webpack 中生成哈希损坏的资产(图像文件)?
How to prevent generating hashed broken assets (Image files) in webpack?
伙计们,你有没有想过在 web pack 中为图像的输出设置一个特定的路径,但是在输出中创建的文件是输出文件夹根目录中的损坏文件(这里是 dist )?
虽然创建了健康文件但未链接。
并在 html、css 链接损坏的文件
或者让我这样说:
我要创建的输出:
src
webpack/webpack.config.js
dist
|—— |fonts
|—— |js
|—— |img
-————--img1.jpg
-————--img2.png
———-—--img3.png
——- index.html
——- another.html
但最终输出:
src
webpack/webpack.config.js
dist
|—— |fonts
|—— |js
|—— |img
-————--img1.jpg
-————--img2.png
-————--img3.png
——- index.html
——- another.html
——- sdf8s7s.jpg => broken and linked file
——- sdf8ws3.png => broken and linked file
——- sd4sg7i.png => broken and linked file
.
//webpack/webpack.config.js
module.exports = {
entry: {
'bundle': path.resolve(__dirname, '../src/js/index.js'),
},
output: {
path: path.resolve(__dirname, "../dist"),
filename: "js/[name].js",
clean: true,
},
module: {
rules: [
//...
{
test: /\.(png|svg|jp[e]g|gif|webp)$/i,
loader: 'file-loader',
options: {
outputPath: '/img/',
name: "[name].[ext]",
useRelativePaths: true,
publicPath: '../img/'
},
},
//...
],
},
plugins: [
//...
],
};
如果您仔细观察并尝试在文本编辑器中打开这些图像,您就会明白到底发生了什么。
无论如何,在新的 webpack 中,不需要文档中显示的图像文件加载器。
我为解决这个问题所做的是将其添加到 webpack 配置中:
module.rules[{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource"
}]
和
output: {assetModuleFilename: 'images/[name][ext]'}
这应该可以修复链接、损坏的图像和散列问题
伙计们,你有没有想过在 web pack 中为图像的输出设置一个特定的路径,但是在输出中创建的文件是输出文件夹根目录中的损坏文件(这里是 dist )? 虽然创建了健康文件但未链接。 并在 html、css 链接损坏的文件
或者让我这样说:
我要创建的输出:
src
webpack/webpack.config.js
dist
|—— |fonts
|—— |js
|—— |img
-————--img1.jpg
-————--img2.png
———-—--img3.png
——- index.html
——- another.html
但最终输出:
src
webpack/webpack.config.js
dist
|—— |fonts
|—— |js
|—— |img
-————--img1.jpg
-————--img2.png
-————--img3.png
——- index.html
——- another.html
——- sdf8s7s.jpg => broken and linked file
——- sdf8ws3.png => broken and linked file
——- sd4sg7i.png => broken and linked file
.
//webpack/webpack.config.js
module.exports = {
entry: {
'bundle': path.resolve(__dirname, '../src/js/index.js'),
},
output: {
path: path.resolve(__dirname, "../dist"),
filename: "js/[name].js",
clean: true,
},
module: {
rules: [
//...
{
test: /\.(png|svg|jp[e]g|gif|webp)$/i,
loader: 'file-loader',
options: {
outputPath: '/img/',
name: "[name].[ext]",
useRelativePaths: true,
publicPath: '../img/'
},
},
//...
],
},
plugins: [
//...
],
};
如果您仔细观察并尝试在文本编辑器中打开这些图像,您就会明白到底发生了什么。 无论如何,在新的 webpack 中,不需要文档中显示的图像文件加载器。
我为解决这个问题所做的是将其添加到 webpack 配置中:
module.rules[{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource"
}]
和
output: {assetModuleFilename: 'images/[name][ext]'}
这应该可以修复链接、损坏的图像和散列问题