All images in /assets folder dissapear when I build with webpack

问题

Until now I worked in dev enviroment, but now I arrived into prod enviroment, and I run into this issue:

some important details on the project:

• Everything works fine when I run the project on webpack-dev-server
• Its a React app
• I costumized webpack.config myself so maybe I have some mistakes (not a create-react-app)
• My /assets folder has some images
• I have font-awesome installed
• I use file-loader to deal with font-awesome and all the images

The problem:

After I run build I loose all of the images I had in the /assets folder, and get to have only some font-awesome-webfonts files.

I still get to have an /assets folder inside /dist, but my images are getting dropped of somewhere on the build proccess.

I'm not sure why this happens, but I have a feeling that font-awesome's files runs over the rest of the files, but its just an assumption.

Do you see what am I missing ?

my webpack.config.js:

const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const AutoDllPlugin = require('autodll-webpack-plugin');

// Development
const APP_DIR = path.join(__dirname, 'src');
const BUILD_DIR = path.join(__dirname, 'dist');
const ASSETS_DIR = path.join(__dirname, 'src', 'assets');

// Production
const PROD_URL = '/portfolio/dist/';
const PROD_ASSETS_DIR = PROD_URL+'assets';


module.exports = {
    entry: {
        main: APP_DIR,   
    },
    output: {
        filename: 'app.js',
        path: BUILD_DIR,
        publicPath: PROD_URL
    },
    devServer: {
        historyApiFallback: true,
        compress: true,
        contentBase: ASSETS_DIR
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /.(png|gif|jpg|jpeg|ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [{
                  loader: 'file-loader',
                  options: {
                    name: '[name].[ext]',
                    outputPath: 'dist/assets/',    // where the fonts will go
                    publicPath: PROD_ASSETS_DIR       // override the default path
                  }
                }]
              } 
        ]
    },
    plugins: [
        new HtmlPlugin({
            filename: 'index.html',
            template: './src/index.html'
        }),

        new AutoDllPlugin({
            inject: true,
            filename: '[name]_[hash].js',
            entry: {
                vendor: [
                    'react',
                    'react-dom',
                    'react-router-dom',
                    'mobx', 
                    'mobx-react', 
                    'd3', 
                    // 'styled-component',
                    'lodash',
                    'topojson',
                    'font-awesome',
                    // 'react-flag-icon-css',
                    'react-chartjs-2',
                    'datamaps',
                    'chart.js'
                ] 
            }
        }),

        new BundleAnalyzerPlugin({
            // Can be `server`, `static` or `disabled`.
            // In `server` mode analyzer will start HTTP server to show bundle report.
            // In `static` mode single HTML file with bundle report will be generated.
            // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
            analyzerMode: 'server',
            // Host that will be used in `server` mode to start HTTP server.
            analyzerHost: '127.0.0.1',
            // Port that will be used in `server` mode to start HTTP server.
            analyzerPort: 8888,
            // Path to bundle report file that will be generated in `static` mode.
            // Relative to bundles output directory.
            reportFilename: 'report.html',
            // Module sizes to show in report by default.
            // Should be one of `stat`, `parsed` or `gzip`.
            // See "Definitions" section for more information.
            defaultSizes: 'parsed',
            // Automatically open report in default browser
            openAnalyzer: false,
            // If `true`, Webpack Stats JSON file will be generated in bundles output directory
            generateStatsFile: false,
            // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
            // Relative to bundles output directory.
            statsFilename: 'stats.json',
            // Options for `stats.toJson()` method.
            // For example you can exclude sources of your modules from stats file with `source: false` option.
            // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
            statsOptions: null,
            // Log level. Can be 'info', 'warn', 'error' or 'silent'.
            logLevel: 'info'
          })
    ],

    devtool: 'source-maps',
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"]
    }
}

回答1:

I had the same problem but i could solve it by require this const path = require('path') and in my output object I added this line path: path.resolve(__dirname, 'dist/assets')

来源：https://stackoverflow.com/questions/48390655/all-images-in-assets-folder-dissapear-when-i-build-with-webpack