I have customized my next.config file (webpack) to generate a static JavaScript file (.next/static/loader.js).
The original loader.js is an Immediately Invoked Function Expression (IIFE):
(function stickerLoader(){
alert('Hello');
// ... some code here
}())
It is used like this:
<script type="text/javascript" src="/_next/static/loader.js"></script>
However, the script does not execute immediately because it gets compiled with webpack wrapper logic added as shown below:
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["static/loader.js"],{
/***/ "./components/Sticker/loader.js":
/*!**************************************!*\
!*** ./components/Sticker/loader.js ***!
\**************************************/
/*! no static exports found */
/***/ (function(module, exports) {
(function stickerLoader() {
alert('Hello');
// ... some minified source code
})();
/***/ })
},[["./components/Sticker/loader.js","static/runtime/webpack.js"]]]);
Is there a way in Next.js to configure settings that would remove the webpack wrapper and only include my source code, so the final result would look like:
(function stickerLoader() {
alert('Hello');
// ... some minified source code
})();
This is how my next.config.js looks like:
module.exports = {
webpack(config, options) {
return merge(config, {
entry() {
return config.entry().then(entry => {
return Object.assign({}, entry, {
'static/loader.js': path.resolve(
__dirname,
'components',
'Sticker',
'loader.js'
)
});
});
}
});
};
};