javascript - 当我使用 webpack 构建时，/assets 文件夹中的所有图像都消失了

Question

直到现在我都在开发环境工作，但现在我进入了生产环境，然后我运行进入这个问题:

项目的一些重要细节:

• 一切正常 当我在 webpack-dev-server
上运行项目时
• 它是一个React 应用
• 我自己设置了 webpack.config 所以可能我有一些错误(不是 create-react-app)
• 我的 /assets 文件夹有一些图片
• 我安装了font-awesome
• 我使用file-loader 来处理font-awesome 和所有图片

问题:

运行构建后，我丢失了 /assets 文件夹中的所有图像， 并且只有一些 font-awesome-webfonts 文件。

我仍然在 /dist 中有一个 /assets 文件夹，但是我的图像在构建过程中的某个地方被丢弃了。

我不确定为什么会这样，但我感觉 font-awesome 的文件覆盖了其余文件，但这只是一个假设。

你知道我错过了什么吗？

我的 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"]
    }
}

Answer 1

我有同样的问题，但我可以通过 require this const path = require('path') 解决它，在我的输出对象中我添加了这一行 path: path.resolve( __dirname, 'dist/assets')