Webpack构建任务覆盖优化

Question

问题：生产构建任务正在压缩文件，然后使用未压缩的文件覆盖文件。

上下文：我正在使用环境变量来使用不同的Webpack配置文件。 npm run dev使用webpack.config.dev.js并将未缩小的文件放入/ public。 npm run dist使用webpack.config.prod.js并将缩小的文件放入/ dist。 两者都需要webpack.config.common.js。

似乎dist任务发生的时间顺序存在问题。 它首先将缩小的文件添加到/ dist，然后将其删除以将其替换为未缩小的文件。 当然，这不利于缩小它们的目的。

问题： dist任务是否意外运行，或者是否看到任何可能导致此问题的东西？

我是webpack的新手，任何帮助将不胜感激。 谢谢。

package.json脚本：

  "scripts": {
    "dev": "NODE_ENV=development webpack --config webpack.config.dev.js --mode development --watch",
    "dist": "NODE_ENV=production webpack --config webpack.config.prod.js --mode production && fractal build"
  },

webpack.config.common.js：

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const magicImporter = require('node-sass-magic-importer');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: { main: './assets/js/main.js'},
    resolve: {
        modules: [
            path.resolve(__dirname, 'assets/js'),
            path.resolve(__dirname, 'assets'),
            path.resolve(__dirname, 'favicon.ico'),
            'node_modules'
        ],
        extensions: ['.js']
    },
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env'],
                        babelrc: false
                    }
                }
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'resolve-url-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            importer: magicImporter(),
                            sourceMap: true
                        }
                    }
                ]
            }
    },
    plugins: [      
        new MiniCssExtractPlugin({
            filename: 'assets/css/main.css'
        }),

        new CopyWebpackPlugin([
            {
                from: 'assets/img/**/*',
                to: 'assets/img/',
                flatten: true
            },
            {
                from: 'assets/video/**/*',
                to: 'assets/video/',
                flatten: true
            },
            {
                from: 'assets/webvtt/**/*',
                to: 'assets/webvtt/',
                flatten: true
            },
            {
                from: 'favicon.ico',
                to: ''
            },
            {
                from: '*.png',
                to: ''
            }
        ])
    ]
};

webpack.config.dev.js：

const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');

module.exports = merge(common, {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'public/'),
        publicPath: '/',
        filename: 'assets/js/main.js'
    }
});

webpack.config.prod.js：

const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/',
        filename: 'assets/js/main.js'
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: false,
                parallel: true,
                sourceMap: false,
                uglifyOptions: {
                    warnings: false,
                    parse: {},
                    compress: {},
                    mangle: true,
                    output: null,
                    toplevel: false,
                    nameCache: null,
                    ie8: false,
                    keep_fnames: false
                },
                extractComments: {
                    condition: /^\**!|@preserve|@license|@cc_on/i,
                    filename: 'assets/js/extracted-comments.js'
                }
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    }
});

Answer 1

通过将所有Webpack配置重新组合回webpack.config.js并使用条件检查环境以推动优化，而不是使用其他配置，我能够解决此问题。

我认为问题在于将fractal build任务附加到dist任务。 我认为webpack正确地缩小了文件，然后分形在此之后将它们缩小了。 我不确定为什么合并文件可以解决它（我的dist任务仍然附加了fractal build ），但是我很高兴它现在可以按预期工作。

更新了package.json脚本：

  "scripts": {
    "dev": "NODE_ENV=development webpack --mode development --watch",
    "dist": "NODE_ENV=production webpack --mode production && fractal build"
  },

更新了webpack.config.js：

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const magicImporter = require('node-sass-magic-importer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    mode: process.env.NODE_ENV,
    entry: { main: './assets/js/main.js'},
    output: {
        path: path.resolve(__dirname, 'public/'),
        publicPath: '/',
        filename: 'assets/js/main.js'
    },
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env'],
                        babelrc: false
                    }
                }
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'resolve-url-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            importer: magicImporter(),
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [      
        new MiniCssExtractPlugin({
            filename: 'assets/css/main.css'
        }),

        new CopyWebpackPlugin([
            {
                from: 'assets/img/**/*',
                to: 'assets/img/',
                flatten: true
            },
            {
                from: 'assets/video/**/*',
                to: 'assets/video/',
                flatten: true
            },
            {
                from: 'assets/webvtt/**/*',
                to: 'assets/webvtt/',
                flatten: true
            },
            {
                from: 'favicon.ico',
                to: ''
            },
            {
                from: '*.png',
                to: ''
            }
        ])
    ],
    optimization: {
        minimizer: []
    }
};

if (process.env.NODE_ENV === 'production') {
    module.exports.optimization.minimizer.push(
        new UglifyJsPlugin({
            cache: false,
            parallel: true,
            sourceMap: false,
            uglifyOptions: {
                warnings: false,
                parse: {},
                compress: {},
                mangle: true,
                output: null,
                toplevel: false,
                nameCache: null,
                ie8: false,
                keep_fnames: false
            },
            extractComments: {
                condition: /^\**!|@preserve|@license|@cc_on/i,
                filename: 'assets/js/extracted-comments.js'
            }
        }),
        new OptimizeCSSAssetsPlugin({})
    );
}

作为参考，此行始终位于fractal.js中：

fractal.web.set('builder.dest', __dirname + '/dist');