webpack - webpackプロダクションで画像を取得するには?

Question

production フォルダに画像がありません。webpack config で問題を修正する簡単な方法はありますか?

package.json

"scripts": {
  "start": "npm run build",
  "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
  "build:prod": "webpack -p && cp src/index.html dist/index.html"
},

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const extractPlugin = new ExtractTextPlugin({
    filename: '[name].css'
});
const DIST_DIR = path.resolve(__dirname, 'dist');
const SRC_DIR = path.resolve(__dirname, 'src');

const config = {
    entry: SRC_DIR + '/App.js',
    output: {
        path: DIST_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                include: SRC_DIR,
                loader: 'babel-loader',
                query:{
                    presets: ['es2015']
                }
            },
            {
                test: /\.scss$/,
                use: extractPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: (loader) => [
                                    require('autoprefixer')({
                                        browsers: ['last 2 version']
                                    }),
                                    require('postcss-flexbugs-fixes')(),
                                    require('css-mqpacker')
                                ]
                            }
                        },
                        {
                            loader: 'sass-loader',
                        }
                    ]
                })
            },
            {
                test: /\.(jpeg|png)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'img/',
                            publicPath: 'img/'
                        }
                    }
                ]
            },
            {
                test: /\.(woff2?|svg)$/,
                use: 'url-loader?limit=10000&name=fonts/[name].[ext]'
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            }
        ]
    },
    plugins:[
        extractPlugin,
        new CleanWebpackPlugin(['dist'])
    ]
};

module.exports = config;

Answer 1

アプリケーション コードで使用しない場合require('image.jpg');、webpack はそれを解決しません (したがって、dist フォルダーに移動されません)。を使用して css ファイルに画像が必要な場合は、それを解析するために for webpack をurl()含める必要があります。続きを見るurl-loader