Webpack不会将图像复制到dist文件夹 [英] Webpack is not copying images to dist folder

问题描述

我从webpack开始，但在这方面我真的很新，而且我现在陷入了僵局。
我的项目正确复制了我的字体，但不是图像。现在我能够使其工作的唯一方法是将我的图像手动复制到 dist / img 文件夹中。

这是我的配置：

  var HtmlWebpackPlugin = require（'html-webpack-plugin'）; 
 var ExtractTextPlugin = require（extract-text-webpack-plugin）; 
 var webpack = require（'webpack'）; 
 var path = require（path）; 
 
 
 
 module.exports = {
条目：'./src/app.js'，
输出：{
路径： path.resolve（__ dirname +'/ dist'），
文件名：'app.bundle.js'
 // publicPath：'/ dist'，
}，
模块： {
规则：[
 {
 test：/\.scss$/，
 use：ExtractTextPlugin.extract（{
 fallback：style-loader， 
 use：[css-loader？sourceMap，resolve-url-loader，sass-loader？sourceMap]，
 // publicPath：'/ dist'
}） 
}，
 {
 test：/\.(woff2?|ttf|otf|eot|svg)$/，
 use：[{
 loader： 'file-loader'，
 options：{
 name：'[name]。[ext]'，
 outputPath：'fonts /'
} 
}] 
 // loader：'file-loader？name = / fonts / [name]。[ext]'
 }，
 {
 test：/\.(jpg|png|gif)$/，
 use：[{
 loader：'file-loader'，
选项：{
 name：'[name]。[ext]'，
 outputPath：'img /'，
 publicPath：'img /'
} 
 }] 
} 
] 
}，
 devServer：{
 contentBase：path.join（__ dirname，/ dist），
 compress：true ，
 port：8000，
 stats：errors-only，
 open：true 
}，
 plugins：[
 new webpack.ProvidePlugin（ {
 $：'jquery'，
 jQuery：'jquery'
}），
新ExtractTextPlugin（styles.css），
新HtmlWebpackPlugin（{ b $ b title：'Project'，
 hash：true，
 template：'./src/index.html'
}）
] 
} 
  

我试过seve ral配置但没有解决方案。我也在这里搜索任何解决方案，但没有成功。

对不起我的英文。

以下是我的结构：
我的崇高文字结构

感谢所有人！如果您的图片仅在HTML文件中被引用为< img> $ c>标签，默认情况下webpack不会提取它们，因为它不解析HTML。您至少有两种选择：



1. 使用 CopyWebpackPlugin 将文件复制到任何你想要的位置，这至少可以删除你提到的手动部分。




2. 将您的图像引用移动到样式，webpack可以通过您正在使用的scss加载器来拾取它们。例如
   
   

     background-image：url（img / foo.png）; 
     




I'm starting with webpack, but I'm really new on this and I'm stuck right now. My project copies my fonts correctly but not images. Now the only way I am able to make it work is by copying my images manually to the dist/img folder.

This is my config:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('webpack');
var path = require("path");



module.exports = {
entry: './src/app.js',
output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'app.bundle.js'
    // publicPath:  '/dist',
},
module: {
    rules:[
        {
        test:/\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader?sourceMap","resolve-url-loader","sass-loader?sourceMap"],
            // publicPath: '/dist'
            })
        },
        {
            test: /\.(woff2?|ttf|otf|eot|svg)$/,
            use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }  
                  }]
            // loader: 'file-loader?name=/fonts/[name].[ext]'
        },
        {
            test: /\.(jpg|png|gif)$/,
            use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        publicPath:'img/'
                    }  
                  }]
        }
    ]
},
devServer: {
    contentBase: path.join(__dirname, "/dist"),
    compress: true,
    port: 8000,
    stats: "errors-only",
    open: true
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    }),
    new ExtractTextPlugin("styles.css"),
    new HtmlWebpackPlugin({
        title: 'Project',
        hash:true,
        template: './src/index.html'
    })
]
}

I've tried several configurations but no solution. I also searched here for any solution but without success.

Sorry for my English.

Here is my structure: Structure from my sublime text

Thanks for all!!

解决方案

If your images are only referenced in HTML files as <img> tags, webpack by default won't pick them up because it doesn't parse HTML. You have at least 2 choices:

1. Use CopyWebpackPlugin to copy the files to wherever you want, this at least removes the "manual" part you mention

2. Move your images references to styles, where webpack can pick them up via the scss loader you are using. For example

   background-image: url("img/foo.png");
   

这篇关于Webpack不会将图像复制到dist文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！