web-dev-qa-db-ja.com

Webpackは画像をdistフォルダーにコピーしていません

私は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 = {
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'
    })
]
}

私はいくつかの構成を試しましたが、解決策はありません。私もここで解決策を探しましたが、成功しませんでした。

英語でごめんなさい。

これが私の構造です： 私の崇高なテキストからの構造

全てに感謝！！

htmlwebpackwebpack-file-loader
8
Alberto Molina

画像がHTMLファイルで<img>タグとしてのみ参照されている場合、webpackはHTMLを解析しないため、デフォルトでは画像を取得しません。少なくとも2つの選択肢があります。

  1. CopyWebpackPlugin を使用して、ファイルを任意の場所にコピーします。これにより、少なくとも、言及した「手動」部分が削除されます。

  2. 画像参照をスタイルに移動します。ここで、webpackは使用しているscssローダーを介して画像を取得できます。例えば

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