Попытка перейти от gulp к webpack

Question

В настоящее время я пытаюсь обновить старый AngularJs 1.x проект до последней Angular 2+. В этом проекте Gulp используется для минимизации всех файлов JS и LESS. Теперь я бы хотел перейти на Webpack для этой цели. Однако я сталкиваюсь с некоторыми проблемами при настройке / запуске веб-пакета.

В моем проекте у меня есть много общих библиотек (которые являются просто набором зависимостей JS vendor / legacy scripts), которые в настоящее время минимизируются с использованием gulp следующим образом:

gulp.task('scripts', function() {

return gulp.src([

    // Generic Libraries.

    'assets/js/vendor/beautify-html.js',
    'assets/js/vendor/moment.js',
    'assets/js/vendor/moment-range.js',
    'assets/js/vendor/html2canvas.js',
    'assets/js/vendor/toggles.js',
    'assets/js/vendor/alertify.js',
    'assets/js/vendor/spectrum.js',
    'assets/js/vendor/zero-clip.min.js',
    'assets/js/vendor/contextMenu.js',
    'assets/js/vendor/emojione.min.js',
    'assets/js/vendor/string-format.js',
    'assets/js/vendor/tinycolor-min.js',
    'assets/js/vendor/matrix.js',
    'assets/js/vendor/sanitize.js',
    'assets/js/vendor/sha1.min.js',
    'assets/js/vendor/pace.min.js',

    'assets/js/vendor/dynamics.js/lib/dynamics.js',

    'assets/js/vendor/pace/pace.js',

    'assets/js/vendor/pace-ng-file-upload-patch.js',

])

// Generate Minified Script.

    .pipe(concat('builder.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify({mangle:false}).on('error', gutil.log))
    .pipe(gulp.dest('assets/js'))

    .pipe(browserSync.reload({
        stream: true
    }));
});

Чтобы сделать то же самое в веб-пакете, я настроил файл ввода (_builder. js) в своем проекте, который импортирует все сценарии в папку assets / js / vendor / следующим образом:

export const importAll = (r) => {
   r.keys().forEach(r);
};

importAll(require.context('../assets/js/vendor', false, /\.js$/));

И, соответственно, мой файл webpack.config. js пока выглядит следующим образом:

const path = require('path');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
var nodeExternals = require('webpack-node-externals');

module.exports = {
    mode: 'development',
    entry: {
        builder: './entryPoints/_builder.js',
        iframe: './entryPoints/_iframe.js',
        triggerController: './entryPoints/_triggerController.js'
    },
    optimization: {
        minimizer: [
          new OptimizeCssAssetsPlugin(),
          new TerserPlugin(),
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            path: path.resolve(__dirname, 'dist'),
        }),
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            url: false,
                        },
                    },
                    "less-loader",
                ]
            },
        ],
    },
    output: {
        filename: '[name].min.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

При запуске веб-пакета я сталкиваюсь с этой ошибкой:

WARNING in ./assets/js/vendor/moment.js
Module not found: Error: Can't resolve './locale' in 'I:\xampp\htdocs\aiva-create\assets\js\vendor'
 @ ./assets/js/vendor/moment.js
 @ ./assets/js/vendor sync nonrecursive \.js$
 @ ./entryPoints/_builder.js
ERROR in ./assets/js/vendor/beautify-html.js
Module not found: Error: Can't resolve './beautify-css' in 'I:\xampp\htdocs\aiva-create\assets\js\vendor'
 @ ./assets/js/vendor/beautify-html.js 819:8-828:10 821:32-60
 @ ./assets/js/vendor sync nonrecursive \.js$
 @ ./entryPoints/_builder.js
ERROR in ./assets/js/vendor/angular.easypiechart.min.js
Module not found: Error: Can't resolve 'angular' in 'I:\xampp\htdocs\aiva-create\assets\js\vendor'
 @ ./assets/js/vendor/angular.easypiechart.min.js 9:53-97
 @ ./assets/js/vendor sync nonrecursive \.js$
 @ ./entryPoints/_builder.js
ERROR in ./assets/js/vendor/moment-range.js
Module not found: Error: Can't resolve 'moment' in 'I:\xampp\htdocs\aiva-create\assets\js\vendor'
 @ ./assets/js/vendor/moment-range.js 4:4-6:6
 @ ./assets/js/vendor sync nonrecursive \.js$
 @ ./entryPoints/_builder.js

Я сталкиваюсь с подобной ошибкой при попытке импортировать любые другие скрипты зависимости / устаревшие в папку vendors в моем проекте. Есть идеи, как решить эту ошибку для моего проекта? Любая дополнительная опция, которую я могу добавить в свой файл конфигурации webpack для решения этой проблемы?

ОБНОВЛЕНИЕ: Итак, я только что обнаружил, что эти ошибки могут быть просто результатом отсутствия пакетов узлов в моем проекте. Поэтому я запустил npm -install для всех этих отсутствующих пакетов, и теперь соответствующие сообщения об ошибках пропали. Я не смог устранить одну из ошибок: ERROR in ./assets/js/vendor/beautify-html.js, но пока я исключу этот конкретный сценарий, так как он мне может и не понадобиться. Я до сих пор не уверен, столкнусь ли я с какими-либо проблемами при запуске проекта с комплектным js из веб-пакета, поэтому я буду держать этот вопрос открытым, пока все не станет ясно. Также обратите внимание, что я до сих пор не уверен, почему эти ошибки не отображаются при запуске gulp, пока эти пакеты не установлены.