Оптимизация переопределения задач сборки Webpack - PullRequest
Новая
       46

Оптимизация переопределения задач сборки Webpack

0 голосов
/ 11 декабря 2018

Проблема: Задача производственной сборки минимизирует файлы, но затем переопределяет те, у которых нет файлов.

Контекст: Я использую переменную среды для использования различныхфайлы конфигурации webpack.npm run dev использует webpack.config.dev.js и помещает незавершенные файлы в / public.npm run dist использует webpack.config.prod.js и помещает минимизированные файлы в / dist.И то, и другое требует webpack.config.common.js.

Кажется, что есть проблема с порядком, когда что-то происходит для задачи dist.Сначала он добавляет минимизированные файлы в / dist, а затем удаляет их, чтобы заменить их на неинициализированные файлы.Это, конечно, отрицательно сказывается на цели их минимизации.

Вопрос: Есть ли что-то непреднамеренно запущенное для задачи dist, или вы видите что-то, что может вызывать эту проблему?

Я новичок в вебпаке, и любая помощь будет высоко ценится.Спасибо.

Сценарии 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({})
        ]
    }
});

1 Ответ

0 голосов
/ 12 декабря 2018

Я смог решить эту проблему, объединив все мои конфиги веб-пакетов обратно в webpack.config.js и используя условное выражение, проверяющее среду на предмет оптимизации, вместо использования другого конфига.

Я думаю, чтопроблема заключалась в добавлении задачи fractal build к задаче dist.Я думаю, что веб-пакет правильно минимизировал файлы, а затем фрактал создавал их без единого объединения.Я не уверен, почему объединение файлов решило эту проблему (моя задача 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');
...