我联系你是因为在配置webpack时遇到了问题。我想要将我的图片从/src/images/复制到/dist/images/文件夹中。
这是我的架构:
dist
|-images
| |-lorem-picsum.png
|-pages
| |--about.html
| |--home.html
|-a069f3e2cf7332c2cd34.png
|-main.js
node_modules
src
|-images
| |-lorem-picsum.png
|-pages
| |--about.html
| |--home.html
|-index.js
package-lock.json
package.json
webpack.config.js
我正在使用file-loader,这是我的webpack.config.js配置:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.html$/i,
loader: "html-loader",
options : {
minimize : false,
}
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name : '[name].[ext]',
outputPath: 'images'
}
}
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template : path.resolve(__dirname, './src/pages/home.html'),
filename: path.resolve(__dirname, './dist/pages/home.html'),
}),
new HtmlWebpackPlugin({
template : path.resolve(__dirname, './src/pages/about.html'),
filename: path.resolve(__dirname, './dist/pages/about.html'),
})
],
};
当我执行"npm run build"时,出现了问题,它在dist文件夹中创建了一个空图片(a069f3e2cf7332c2cd34.png)。这张图片没有可视内容,但它包含以下文本:
export default __webpack_public_path__ + "images/lorem-picsum.png";
现在,/dist/home.html包含:
<img src="../a069f3e2cf7332c2cd34.png" alt="">
但是该图像未显示在前端。
您有任何想法如何避免创建此“空”文件,只需将图像文件夹复制到 dist 中,并保持与 /src/ 文件夹中编写的相同吗?
提前感谢。