Migration from Gulp to Webpack 4 - concatenate scripts without resolving dependencies

Question

I need to migrate legacy system to webpack-4 from gulp. I stucked with concatenating few scripts into one. My goal is to achieve pure concatenation without additional staff generated by webpack. So result from gulp must equals result from webpack.

I used webpack-concat-plugin.

Here is my 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"
                ]
            }
        )
}]

This produces bundle, but I got extra code inside like:

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

and depencencies (for example to jQuery as below)

/***/ }),

/***/ "./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 *

It means that webpack added by default dependency defined in require in ./js/bootstrap/datetimepicker.js. Of course added also dependencies from moment.js.

My bundle is terrible big, because it contains additional libraries I didn't want to include. I have external dependencies to jQuery and moment.js

I tried to use webpack externals:

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

but still jQuery is included.

Is there any way to do pure concatenation for webpack without webpack bootstrap code?

Thanks

Rafal

webpack is not like gulp. Since webpack is a bundler you are going to have webpack code with your files, that is how webpack loads content. — PlayMa256, Aug 10 '18 at 12:55
The idea behind webpack is you having an entry point, where your application starts, then everything is parsed/transformed to content that the browser can understand. Webpack also bundles your dependencies together so they can be accessed. Infact you externals config is a bit wrong, but the rest is what it is. — PlayMa256, Aug 10 '18 at 12:56
Even if I create entry which will be an array of files I want to concatenate, webpack by default will do the same - it will try to resolve all my dependencies. That's why I tried to check 'webpack-concat-plugin' to that. Am I correct that is not possible to do pure concatenation with webpack? — Rafal Cypcer, Aug 10 '18 at 13:07
Yes, you cant "pure concatenate". You will always have bootstrap code somewhere. — PlayMa256, Aug 10 '18 at 13:08
That won't be wrong if you keep a gulp task for that. Webpack wasnt meant to behave similar to gulp, webpack is a bundler — PlayMa256, Aug 10 '18 at 13:09

Vinay Raghu · Answer 1 · 2018-08-20T15:21:24.777

0

If you add an entry point but set target "web", it will not include the JSONP stuff. https://webpack.js.org/configuration/output/#output-librarytarget

Another option (depending on which version of webpack you are on) is to use a plugin.

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

EDIT: Updated output.libraryTarget to target

edited Aug 20 '18 at 15:21

answered Aug 16 '18 at 19:08

Vinay Raghu

1,269
2
13
22

output.libraryTarget: 'web' doesn't exist. I think you meant other target: https://webpack.js.org/concepts/targets/, but by default is web. – Rafal Cypcer Aug 17 '18 at 10:01
Yes you're correct. I meant the other target which actually defaults to web. – Vinay Raghu Aug 20 '18 at 15:20
@RafalCypcer Have you also looked into this https://stackoverflow.com/questions/48998102/webpack-how-to-load-non-module-scripts-into-global-scope-window – Vinay Raghu Aug 21 '18 at 10:20

Migration from Gulp to Webpack 4 - concatenate scripts without resolving dependencies

1 Answers1