How can I make webpack skip occurences of
require('shelljs/global'); in my source files? I want to make a bundle of my source files but keep the require('shelljs/global') in the files and not bundle shelljs/global.
- Soved my case by using target: 'node', webpack.github.io/docs/configuration.htmlThomas Andersen– Thomas Andersen2016-01-16 19:58:18 +00:00Commented Jan 16, 2016 at 19:58
Add a comment |
7 Answers
If you store the path in a variable then IgnorePlugin will not work. Though you still could do:
const myCustomModule = eval('require')(myCustomPath) 
3 Comments
heinob
Simple and effective.
redfox05
Warning: eval should be avoided. Only use it if you know and understand the risks. Otherwise, find another solution. Read up on Google or here for more info: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Ercksen
For this specific use case I see no reason to worry and I claim that this is the cleanest solution, especially if the code is also going to be executed without Webpack as it works for both (in constrast to other suggestions here). Feeding eval with a 'require' literal does not introduce any risks.
for new comers, on webpack 2+ the way to do this is like so:
module.exports = { entry: __dirname + '/src/app', output: { path: __dirname + '/dist', libraryTarget: 'umd' }, externals: { 'shelljs/globals': 'commonjs shelljs/global' } }; the bundle will contain a verbatim require:
require('shelljs/global'); read on more supported formats on webpack's config guide and some good examples here
1 Comment
Cobertos
This will still rewrite the require, but Webpack will look externally for the dependency.
You can use Ignore Plugin (webpack 1) / Ignore plugin (webpack 2).
Add plugin in webpack.config.js:
plugins: [ new webpack.IgnorePlugin(/shelljs\/global/), ], 
Comments
If require is in the global namespace and this is why you want Webpack to ignore it, just do window.require()
Comments
This should be a last resort option, but if you are certain that your JS file is always parsed by Webpack, and nothing else:
You could replace your require() calls with __non_webpack_require__()
Webpack will parse and convert any occurrence of this and output a normal require() call. This will only work if you are executing in NodeJS OR in a browser if you have a global require library available to trigger.
If webpack does not parse the file, and the script is run by something else, then your code will try to call the non-converted __non_webpack_require__ which will fail. You could potentially write some code that checks earlier in your script if __non_webpack_require__ exists as a function and if not, have it pass the call on to require.
However, this should be temporary, and only to just avoid the build errors, until you can replace it with something like Webpack's own dynamic imports.
Comments
Here a trick
const require = module[`require`].bind(module); Note the use of a template string
Comments
If some files contains nested requires and You want to ignore them, You can tell webpack to not do parsing for these specific files. For example if swiper.js and vue-quill-editor.js had inner requires this would be how to ignore them.
module.exports = { module: { noParse: [ /swiper.js/,/quill/ ], 