Question

到目前为止，我一直在 dev环境 工作，但现在我进入了 prod环境 ，我跑了进入这个问题：

该项目的一些重要细节：

在webpack-dev-server

上运行项目时，一切正常

是 React 应用
我自己花了webpack.config，所以也许我有一些错误（不是创建反应应用）
我的/assets文件夹中有一些图片
我安装了font-awesome
我使用file-loader来处理 font-awesome 和所有图片

问题：

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

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

我不确定为什么会发生这种情况，但我觉得字体真棒的文件会在其余文件上运行，但这只是一个假设。

你看到我错过了什么吗？

我的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

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

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

1 个答案: