Миграция с Gulp на Webpack 4 — объединение скриптов без разрешения зависимостей

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

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

Вот мой 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

Я попытался использовать веб-пакет внешние:

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

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

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

Спасибо

Рафаль


person Rafal Cypcer    schedule 10.08.2018    source источник
comment
webpack не похож на gulp. Поскольку webpack является упаковщиком, у вас будет код webpack с вашими файлами, именно так webpack загружает контент.   -  person PlayMa256    schedule 10.08.2018
comment
Идея webpack заключается в том, что у вас есть точка входа, где запускается ваше приложение, а затем все анализируется/преобразуется в контент, понятный браузеру. Webpack также объединяет ваши зависимости, чтобы к ним можно было получить доступ. На самом деле ваша внешняя конфигурация немного неверна, но в остальном все так, как есть.   -  person PlayMa256    schedule 10.08.2018
comment
Даже если я создам запись, которая будет массивом файлов, которые я хочу объединить, веб-пакет по умолчанию сделает то же самое — он попытается разрешить все мои зависимости. Вот почему я попытался проверить «webpack-concat-plugin». Я прав, что невозможно выполнить чистую конкатенацию с помощью веб-пакета?   -  person Rafal Cypcer    schedule 10.08.2018
comment
Да, вы не можете чисто конкатенировать. У вас всегда будет где-то загрузочный код.   -  person PlayMa256    schedule 10.08.2018
comment
Это не будет ошибкой, если вы сохраните для этого задачу gulp. Webpack не должен был вести себя подобно gulp, webpack — это упаковщик   -  person PlayMa256    schedule 10.08.2018
comment
Спасибо за помощь @PlayMa256   -  person Rafal Cypcer    schedule 10.08.2018


Ответы (1)


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

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

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

РЕДАКТИРОВАТЬ: Обновлено output.libraryTarget для цели

person Vinay Raghu    schedule 16.08.2018
comment
output.libraryTarget: «сеть» не существует. Я думаю, вы имели в виду другую цель: webpack.js.org/concepts/targets, но по умолчанию веб. - person Rafal Cypcer; 17.08.2018
comment
Да, ты прав. Я имел в виду другую цель, которая на самом деле по умолчанию является сетью. - person Vinay Raghu; 20.08.2018
comment
@RafalCypcer Вы также изучали этот stackoverflow.com/questions/48998102/ - person Vinay Raghu; 21.08.2018