Gathering detailed insights and metrics for updated-webpack-merge-and-include-globally
Gathering detailed insights and metrics for updated-webpack-merge-and-include-globally
Merge multiple files (js, css..) and include by running them "as is". Supports minify by custom transform and wildcard paths.
3.0.0
MIT
JavaScript
25.59 kB
Installations
npm install updated-webpack-merge-and-include-globallyDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=16
Node Version
20.5.1
NPM Version
9.8.0
Languages
3
JavaScript
HTML
CSS
JavaScript (96%)
HTML (3.69%)
CSS (0.31%)
Developer
jtrinklein
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
250 Commits
1 Branches
1 Contributors
Updated on Sep 07, 2023
Maintainers
1
Package Meta Information
Latest Version
3.0.0
Package Id
updated-webpack-merge-and-include-globally@3.0.0
Unpacked Size
25.59 kB
Size
7.61 kB
File Count
17
NPM Version
9.8.0
Node Version
20.5.1
Published on
Sep 08, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
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
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Updated for webpack 5
MERGE INTO SINGLE FILE PLUGIN FOR WEBPACK
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>.
Getting Started
1npm install --save-dev webpack-merge-and-include-globally
Usage
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'); 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 ], 19 "vendor.css": [ 20 'node_modules/toastr/build/toastr.min.css' 21 ] 22 } 23 }), 24 ] 25
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.
Options
files (as object)
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})
transform
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})
files (as array)
Alternative way to specify files as array of src & dest, for flexibility to transform and create multiple destination files for same source when you need to generate additional map file for example.
1new MergeIntoSingle({ 2 files: [{ 3 src:[ 4 'node_modules/jquery/**/*.min.js', 5 'node_modules/classnames/index.js', 6 'node_modules/humps/humps.js' 7 ], 8 dest: code => { 9 const min = uglifyJS.minify(code, {sourceMap: { 10 filename: 'vendor.js', 11 url: 'vendor.js.map' 12 }}); 13 return { 14 'vendor.js':min.code, 15 'vendor.js.map': min.map 16 } 17 }, 18 19 // also possible: 20 // 21 // dest: 'vendor.js' 22 },{ 23 src: ['example/test.css'], 24 dest: 'style.css' 25 26 // also possible: 27 // 28 // dest: code => ({ 29 // 'style.css':new CleanCSS({}).minify(code).styles 30 // }) 31 }] 32})
hash
default: false
set true to append version hash before file extension.
you can get names of generated files mapped to original by passing callback function as second argument to plugin:
1new MergeIntoSingle({ ... }, filesMap => { ... }),
transformFileName
default: undefined
also you can pass function for change output file name with hash
1new MergeIntoSingle({ 2 ..., 3 transformFileName: (fileNameBase, extension, hash) => `${fileName}.[${hash}]${extension}`, 4 // bundle.[somehash].js 5}), 6 7//or 8 9new MergeIntoSingle({ 10 ..., 11 transformFileName: (fileNameBase, extension, hash) => `${fileNameBase}${extension}?hash=${hash}`, 12 // bundle.js?hash=somehash 13}), 14
encoding
default: 'utf-8'
encoding of node.js reading
chunks
default: undefined
array of entry points (strings) for which this plugin should run only
separator
default: '\n'
string used between files when joining them together
Working Example
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.
No security vulnerabilities found.