Gathering detailed insights and metrics for webpack-merge-and-include-globally-http
Gathering detailed insights and metrics for webpack-merge-and-include-globally-http
Gathering detailed insights and metrics for webpack-merge-and-include-globally-http
Gathering detailed insights and metrics for webpack-merge-and-include-globally-http
Merge multiple files (js, css..) and include by running them "as is". Supports minify by custom transform and wildcard paths.
npm install webpack-merge-and-include-globally-http
Typescript
Module System
Node Version
NPM Version
JavaScript (89%)
HTML (10.14%)
CSS (0.86%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
88 Commits
2 Branches
1 Contributors
Updated on Mar 31, 2020
Latest Version
1.0.1
Package Id
webpack-merge-and-include-globally-http@1.0.1
Unpacked Size
193.99 kB
Size
55.85 kB
File Count
14
NPM Version
6.4.1
Node Version
8.11.2
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
NOTE: This is forked from markshapiro/webpack-merge-and-include-globally. It was forked in order to add HTTP fetching.
Webpack plugin to merge your source files together into single file, to be included in index.html, and achieving same effect as you would by including them all separately through <script>
or <link>
.
1npm install --save-dev webpack-merge-and-include-globally-http
Lets say you want to make libraries like jquery
, moment
(including 3 languages) and toastr
available globally, and you're struggling to make them global with webpack or just importing them (in cases they aren't written well) because require() wraps the code into new scope and you want to execute it against a global scope, and you don't want to do this:
1 <script src="/node_modules/jquery/dist/jquery.min.js"></script> 2 <script src="/node_modules/moment/moment.js"></script> 3 <script src="/node_modules/moment/locale/cs.js"></script> 4 <script src="/node_modules/moment/locale/de.js"></script> 5 <script src="/node_modules/moment/locale/nl.js"></script> 6 <script src="/node_modules/toastr/build/toastr.min.js"></script> 7 8 <link rel="stylesheet" href="/node_modules/toastr/build/toastr.min.css">
because your node_modules
is not available in production.
with this plugin you can achieve the desired effect this way:
1 2 const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally-http'); 3 4 module.exports = { 5 ... 6 plugins: [ 7 new MergeIntoSingleFilePlugin({ 8 files: { 9 "vendor.js": [ 10 'node_modules/jquery/dist/jquery.min.js', 11 // will work too 12 // 'node_modules/jquery/**/*.min.js', 13 'node_modules/moment/moment.js', 14 'node_modules/moment/locale/cs.js', 15 'node_modules/moment/locale/de.js', 16 'node_modules/moment/locale/nl.js', 17 'node_modules/toastr/build/toastr.min.js', 18 // HTTP URLs are also supported: 19 // 'http://code.jquery.com/jquery-3.3.1.min.js' 20 ], 21 "vendor.css": [ 22 'node_modules/toastr/build/toastr.min.css' 23 ] 24 } 25 }), 26 ] 27
this generates 2 files with merged js and css content, include them into your index.html
to take effect:
1 <script src="./vendor.js"></script> 2 <link rel="stylesheet" href="./vendor.css">
now jQuery
, moment
and toastr
are available globally throughout your application.
Object that maps file names to array of all files (can also be defined by wildcard path) that will be merged together and saved under each file name.
For example to merge jquery
, classnames
and humps
into vendor.js
, do:
1new MergeIntoSingle({ 2 files: { 3 'vendor.js': [ 4 'node_modules/jquery/**/*.min.js', 5 'node_modules/classnames/index.js', 6 'node_modules/humps/humps.js' 7 ], 8 'style.css': [ 9 'example/test.css' 10 ] 11 } 12})
Object that maps resulting file names to tranform methods that will be applied on merged content before saving. Use to minify / uglify the result.
For example to minify the final merge result of vendor.js
, do:
1new MergeIntoSingle({ 2 files: { 'vendor.js': [...] }, 3 transform: { 4 'vendor.js': code => require("uglify-js").minify(code).code 5 } 6})
default: false
if set true
all files will be merged by their order in array, but makes build slower, good to use if you have dependencies that need to load sooner.
default: 'utf-8'
encoding of node.js reading
working example already included in project.
to test first install npm i
, then run npm run start
to see it in action
and npm run build
to build prod files with vendor file and index.html
.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/27 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
115 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More