41

is there any way to make Webpack keep the #!/usr/bin/env node at the top of my file?

I'm trying to bundle a CLI along with a module... it was a bit tricky to export my index.js / cli.js separately using just one configuration file... and making the cli require index... i got it working...

However.. i didn't find any way to keep the #!/usr/bin/env node at the top of my cli file, any ideas?

in shorts webpack outputs an file like this:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;
..............................................................

but what i need is

#!/usr/bin/env node //<------ HEREEEE

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

..............................................................
Rafael Milewski
  • 788
  • 1
  • 8
  • 15
  • Hi Raf, great job on getting the export-require thing going. Now why do you think webpack is removing the shebang? Show us some code. – John Mee Nov 23 '16 at 02:49
  • the `#!/usr/bin/env node` is used as a shortcut for `node cli.js` so i can invoke my script as if it was a binary on the command line...however webpack bootstrap clean up everything... its needed that the very first line contains `#!/usr/bin/env node` otherwise it wont work... – Rafael Milewski Nov 23 '16 at 02:56

2 Answers2

57

You should be able to use BannerPlugin with raw mode for this. With this plugin you can add any string you want at the top of your bundle. By using the raw mode, it will not wrap the string in a comment.

In your webpack.config.js file:

plugins: [
    new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true }),
]
Mir-Ismaili
  • 13,974
  • 8
  • 82
  • 100
spacek33z
  • 2,203
  • 1
  • 25
  • 31
4

You can now use webpack-shebang-plugin as an all-in-one toolset to retain the hashbang in your source entry file.

BannerPlugin only prepends the hashbang to your output bundles, but it DOESN'T:

  1. remove the hashbang in your source file, which occurs as an Error to webpack syntax check. You additionally need a shebang-loader or a babel-plugin-shebang to deal with source files.

  2. Ensures the file permission of your output bundle as "executable". This is useful when you npm-link your project locally to test the bin file.

These are all done by webpack-shebang-plugin by simply calling

new ShebangPlugin()

, and is configurable.

shuangwhywhy
  • 5,475
  • 2
  • 18
  • 28