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');

Webpack构建任务优先优化

1 个答案: