Миграция с gulp на webpack 4 - объединение скриптов без разрешения зависимостей

Мне нужно перенести устаревшую систему на webpack-4 с gulp. Я придерживался объединения нескольких скриптов в один. Моя цель - добиться чистой конкатенации без дополнительного персонала, генерируемого webpack. Итак, результат из gulp должен равняться результат из webpack.

Я использовал webpack-concat-плагин.

Вот мой webpack.config.js

const ConcatPlugin = require('webpack-concat-plugin');
module.exports = [
{
    plugins: [
        new ConcatPlugin(
            {
                fileName: "js/bootstrap/bootstrap.js",
                filesToConcat: [
                    "./js/bootstrap/button.js",
                    "./js/bootstrap/collapse.js",
                    "./js/bootstrap/datetimepicker.js", // this script requires jQuery and Moment.js
                    "./js/bootstrap/dropdown.js",
                    "./js/bootstrap/modal.js",
                    "./js/bootstrap/multiselect.js",
                    "./js/bootstrap/tooltip.js",
                    "./js/bootstrap/popover.js",
                    "./js/bootstrap/select2.js",
                    "./js/bootstrap/tab.js",
                    "./js/bootstrap/transition.js"
                ]
            }
        )
}]

Это создает пакет, но у меня внутри есть дополнительный код, например:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

и зависимости (например, для jQuery, как показано ниже)

/***/ }),

/***/ "./node_modules/jquery/dist/jquery.js":
/*!********************************************!*\
!*** ./node_modules/jquery/dist/jquery.js ***!
\********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!\n * jQuery JavaScript Library v2.2.4\n * http://jquery.com/\n *\n * 

Это означает, что веб-пакет добавлен по умолчанию зависимости, определенной в require в ./js/bootstrap/datetimepicker.js. Конечно, добавлены также зависимости от moment.js.

Мой комплект ужасно большой, потому что он содержит дополнительные библиотеки, которые я не хотел включать. У меня есть внешние зависимости от jQuery и moment.js

Пробовал использовать webpack внешние:

externals: {
    "jquery": "jQuery"
}, 

но все же jQuery включен.

Есть ли способ сделать чистая конкатенация для веб-пакета без кода начальной загрузки веб-пакета?

Спасибо

Рафаль

webpack не похож на gulp. Поскольку webpack является сборщиком, у вас будет код веб-пакета с вашими файлами, именно так веб-пакет загружает контент.

PlayMa256 10.08.2018 14:55

Идея webpack заключается в том, что у вас есть точка входа, где запускается ваше приложение, а затем все анализируется / преобразуется в контент, который может понять браузер. Webpack также связывает ваши зависимости вместе, чтобы к ним можно было получить доступ. Фактически, ваша внешняя конфигурация немного неверна, но остальное то, что есть.

PlayMa256 10.08.2018 14:56

Даже если я создам запись, которая будет массивом файлов, которые я хочу объединить, webpack по умолчанию сделает то же самое - он попытается разрешить все мои зависимости. Вот почему я попытался проверить на это «webpack-concat-plugin». Я прав, что невозможно выполнить чистую конкатенацию с помощью webpack?

Rafal Cypcer 10.08.2018 15:07

Да, вы не можете использовать "чистую конкатенацию". У вас всегда где-нибудь будет код начальной загрузки.

PlayMa256 10.08.2018 15:08

В этом нет ничего плохого, если для этого вы будете держать задачу по глотку. Webpack не должен был вести себя аналогично gulp, webpack - это сборщик

PlayMa256 10.08.2018 15:09

Спасибо за помощь @ PlayMa256

Rafal Cypcer 10.08.2018 15:22
2
6
773
1

Ответы 1

Если вы добавите точку входа, но установите целевую «сеть», она не будет включать материалы JSONP. https://webpack.js.org/configuration/output/#output-librarytarget

Другой вариант (в зависимости от того, какая у вас версия webpack) - использовать плагин.

https://www.npmjs.com/package/webpack-concat-plugin

Обновлено: обновлен output.libraryTarget для цели

output.libraryTarget: «сеть» не существует. Думаю, вы имели в виду другую цель: webpack.js.org/concepts/targets, но по умолчанию это web.

Rafal Cypcer 17.08.2018 12:01

Да ты прав. Я имел в виду другую цель, которая по умолчанию - сеть.

Vinay Raghu 20.08.2018 17:20

@RafalCypcer Вы тоже заглядывали в этот stackoverflow.com/questions/48998102/…

Vinay Raghu 21.08.2018 12:20

Другие вопросы по теме