Develop Reference

webpack load AMD modules without bundling

I'm migrating a web app from requireJS to webpack.
With requireJS, I have different configurations depending on the environment.
For live environment I use r.js to minify and bundle all of my
modules and their dependencies into a single file. Afterwards, I add
almondJS to manage the dependencies and then I load my js bundle like the following:
<script src="bundle.min.js"></script>
For my development environment, I Load requireJS like this:
<script src="require.js" data-main="/main-config"></script>
and requireJS will use my configuration file specified by data-main, to load modules and their
dependencies asynchronously
As you can see, with requireJS module loading and bundling are two separate processes and that allows me to debug AMD modules during development without needing sourcemaps
How can I achieve this scenario using webpack as a module loader only without bundling during development ?
If this is not possible, is there any other way I can see my source files in the browser debugger without generating sourcemaps?

How can I achieve this scenario using webpack as a module loader only without bundling during development ?
Webpack will always bundle, despite the envieronment.
If this is not possible, is there any other way I can see my source files in the browser debugger without generating sourcemaps?
If your code is transpiled/compiled, you'll need sourcemaps to see that. There is no way to workaround that.

It's true that if your code is transpiled then you'll need sourcemaps. But it is possible to get around bundling though. Yes, webpack will really always try to bundle, but with plugins the code can be taken out of the bundle and placed in the output directory as if it was simply run through the transpiler.
I have a node application that I want to simply transpile to ES5 file-by-file and not bundle anything. So my config to do that is roughly this:
let config = {
entry: [
glob.sync(srcDir + '/**/*.js') // get all .js files from the source dir
],
output : {
filename : '[name].rem.js', // webpack wants to bundle - it can bundle here ;)
path: outDir
},
resolve: {
alias: {
'app': appDir
}
},
plugins: [
new RemoveEmptyScriptsPlugin({extensions: ['js'], scriptExtensions: /\.rem\.js/}) // for all .js source files that get bundled remove the bundle .rem.js file
],
module: {
rules:[{
test: /\.jsx?$/,
type: 'asset/resource', // get webpack to take it out instead of bundling
generator: {
filename: ({filename}) => filename // return full file name so directory structure is preserved
},
use: {
loader: 'babel-loader',
options: {
targets: { node: 16 },
presets: [
['#babel/preset-env', { modules: 'commonjs' /* transpile import/export */}],
]
}
}
}]
}
};
// Since the code does not go through the full pipeline and imports are not getting resolved, aliases will remain in the code.
// To resolve them it takes to hack the aliases object into the babel config
config.module.rules[0].use.options.plugins.push(['babel-plugin-webpack-alias-7', {config: {resolve: {alias: config.resolve.alias}}}];
But then it appeared that the currently published babel-plugin-webpack-alias-7 does not support providing an Object to the config option so I had to patch the plugin https://github.com/shortminds/babel-plugin-webpack-alias-7/pull/22
Ah, and then the webpack-remove-empty-scripts plugin had an issue with my idea so I had to patch that too https://github.com/webdiscus/webpack-remove-empty-scripts/pull/6

Including additional jQuery plugins globally with Webpack 4

I am trying to make a jQuery plugin accessible to inline JavaScript using Webpack 4.
I am using the PluginProvider to make jQuery available to my website:
plugins: [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery"
}),
],
This is working fine and I can access jQuery from any page that includes my bundle.
I tried to add bootstrap-datepicker by creating a bundle called vendor.js with the following contents:
import 'bootstrap-datepicker';
I can call $('input').datepicker() from within the vendor.js bundle, however if I try and call it using an inline <script> I get:
Uncaught TypeError: $(...).datepicker is not a function
How can I configure Webpack 4 to make bootstrap-datepicker available to the global scope?
UPDATE
I've uploaded the sourcecode demonstrating this issue here: https://github.com/LondonAppDev/webpack-global-jquery-issue
It appears the issue is that the second bundle import is re-adding jQuery without the datpicker add-on. Is there a way around this?

I've gone a few rounds with this type of issue and had the most success with the expose-loader. In your webpack config you should set up a section for jQuery using the following expose loader configuration:
module.exports = {
module: {
rules: [
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
}, {
loader: 'expose-loader',
options: '$'
}]
},
...
]
}
}
There is a similar SO posts here:
How to import jquery in webpack (their regex pattern did not work for me)
Expose jQuery to real Window object with Webpack
Webpack 2 loading, exposing, and bundling jquery and bootstrap
You should be able to find several other articles/posts using this configuration, it is the only one that I have successfully been able to get to work to date.
Also of note, bootstrap 4 seems to also load or do a require on jQuery internally, so if you include an import or require after your jQuery import/require and plugins, it will reinit jQuery and cause your plugins to lose scope.

"Import a global variable" in Webpack [duplicate]

This question already has answers here:
Exclude react from webpack bundle
(3 answers)
Closed 5 years ago.
We have a webpack application that we're integrating into a site that uses traditional JS scripts, and those scripts define global variables.
Inside our webpack application, we want to import some libraries that happen to already be on the page as scripts. Rather than download the same code twice, once as a script and again embedded inside the webpack bundle, we'd like webpack to not include the code for the library already on the page as a script, but still allow us to use the ES import syntax to "import" the code in our modules, even though the script code in question actually made the library available by a global variable.
So, we have <script src="jquery.js"> on our page. jquery.js supposedly does something like this:
window.jQuery = {};
And in our code compiled by Webpack, we'd like to do:
import jQuery from 'jquery';
jQuery === window.jQuery // true
Is there any way for Webpack to be configured to resolve certain dependencies, like "jquery" in the above example, and determine that it should transform the import code into a reference to that global variable?
The intent here is to gradually opt into the new ES module syntax in new code in our legacy application, while still taking advantage of the fact that the same code is already available on the page as a script.
I checked Webpack's guide on "shimming" but it seems to offer every capability except the one I've described in this post.

Use webpack's externals:
Prevent bundling of certain imported packages and instead retrieve
these external dependencies at runtime.
externals: {
jquery: 'jQuery'
}

Way to create only one reference for all my js files in my html page [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a lot of js files in my View(html page),and I wonder if there is a way to
combine all my js reference to one ref .

You can use webpack to compile your javascript files and create a bundle file.
Webpack has a lot of documentation and tutorials.

If you're using .NET MVC, have a look at
http://www.asp.net/mvc/overview/performance/bundling-and-minification
If you are developing using plain JS & HTML, gulp could be an alternative with the gulp-bundle package.
var gulp = require('gulp'),
bundle = require('gulp-bundle');
gulp.task('bundle', bundle('./app/*.js', {
appDir: 'app',
buildDir: 'dist',
minify: true
}));
which would take all js files in the app directory, bundle them and minify to the 'dist' directory.

Requirejs : Non amd library [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a script.js included in the website of my customer. This customer uses requirejs but he append script.js at the end of the body without explicitly using requirejs to load it.
In script.js i have libraries that are amd compatible and other not. The problem is that requirejs automatically load library which are amd. And i can't access them in my own library which is not amd compatible.
Do you have any idea ?
Thanks

RequireJs has the ability to "shim" configuration. In your requirejs configuration call, use the following (from the requirejs page). Backbone in this case is not a requirejs module and used as an example.
requirejs.config({
shim: {
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
}
})
You can then use Backbone just like any other module:
define(['backbone'], function (Backbone) {
return Backbone.Model.extend({});
});