javascript - Webpack 不会在生产构建中加载 manifest.json 文件

Question

我正在创建一个 PWA 反应应用程序，在其中配置 manifest.json 文件和 serviceWroker.js 文件。在开发模式下，它工作正常，但是当我使用 webpack 创建生产构建时，manifest.json文件不会加载到Build文件夹中。

有谁知道是什么问题？

这是我的 webpack.config.js 文件

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackRTLPlugin = require('webpack-rtl-plugin');
const WebpackMessages = require('webpack-messages');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const del = require('del');
const webpack = require('webpack');

// theme name
const themeName = 'metronic';
// global variables
const rootPath = path.resolve(__dirname);
const distPath = rootPath + '/src';

const mainConfig = function() {
    const isEnvDevelopment = false;
    const isEnvProduction = true;
    return {
        mode: 'production',
        stats: 'errors-only',
        performance: {
            hints: false
        },
        externals: [ 'jspdf', 'jspdf-autotable' ],
        entry: './src/index.js',
        output: {
            // main output path in assets folder
            path: path.resolve(__dirname, 'dist'),
            // output path based on the entries' filename
            // filename: '[name].js',
            filename: isEnvProduction
                ? 'static/js/[name].[contenthash:8].js'
                : isEnvDevelopment && 'static/js/bundle.js',
            // TODO: remove this when upgrading to webpack 5
            futureEmitAssets: true,
            // There are also additional JS chunk files if you use code splitting.
            chunkFilename: isEnvProduction
                ? 'static/js/[name].[contenthash:8].chunk.js'
                : isEnvDevelopment && 'static/js/[name].chunk.js',
            // We inferred the "public path" (such as / or /my-project) from homepage.
            // We use "/" in development.
            publicPath: '/artbot/app/'
        },
        resolve: { extensions: [ '.scss', '.css','.mjs','.jsx', '.js', '.json' ] },
        optimization: {
            minimize: true,
            namedChunks: true,
            nodeEnv: 'production',
            removeAvailableModules: true,
            removeEmptyChunks: true,
            mergeDuplicateChunks: true,
            minimizer: [ new OptimizeCssAssetsPlugin(), new TerserPlugin({ cache: true }) ],
            splitChunks: {
                  chunks: "all"
              }
        },
        plugins: [
            // webpack log message
            new WebpackMessages({
                name: themeName,
                logger: (str) => console.log(`>> ${str}`)
            }),
            new BundleAnalyzerPlugin(),
            new webpack.optimize.AggressiveMergingPlugin(),
            new HtmlWebpackPlugin({
                title: 'Custom Template',
                template: 'public/index.html',
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                }
            }),
            // create css file
            new MiniCssExtractPlugin({
                filename: 'static/css/[name].css'
            }),
            new WebpackRTLPlugin({
                filename: 'static/css/[name].rtl.css',
                minify: true
            }),
            {
                apply: (compiler) => {
                    // hook name
                    compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
                        (async () => {
                            await del.sync(distPath + '/sass/*.js', { force: true });
                        })();
                    });
                }
            }
        ],

        module: {
            rules: [
                {
                    test: /\.(js|mjs|jsx|ts|tsx)$/,
                    // exclude: /@babel(?:\/|\\{1,2})runtime/,
                    exclude: /node_modules/,
                    loader: require.resolve('babel-loader'),
                    options: {
                        babelrc: true,
                        plugins: [
                            [
                                require.resolve('babel-plugin-named-asset-import'),
                                {
                                    loaderMap: {
                                        svg: {
                                            ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]'
                                        }
                                    }
                                }
                            ]
                        ]
                    }
                },
                {
                    test: /\.css$/,
                    loader: 'css-loader'
                },
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'resolve-url-loader',
                            options: {
                                removeCR: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|jpg|svg)$/,
                    loader: 'file-loader',
                    options: {
                        limit: 10000,
                        name: 'static/media/[name].[hash:8].[ext]',
                        esModule: false
                    }
                    //loader: 'url-loader?limit=8192'
                },
                {
                    test: /\.(woff2|eot|ttf|woff)$/,
                    loader: 'url-loader'
                },
                {
                    test: /\.json$/,
                    loader: 'file-loader',
                    type: 'javascript/auto',
                    exclude: /node_modules/,
                    options: {
                        name: 'static/json/[name].[hash:8].[ext]'
                    }
                },
                {
                    test: /\.html$/i,
                    loader: 'html-loader'
                }
            ]
        }
    };
};

module.exports = function() {
    return [ mainConfig() ];
};

标签： javascriptreactjswebpackwebpack-4