webpack - 如何在 webpack 生产中获取图片？

Question

生产文件夹中没有图像。有什么简单的方法可以解决 webpack 配置中的问题吗？

包.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 文件中使用图像，url()你需要包含一个url-loader用于 webpack 来解析它。看更多