How to keep my shebang in place using webpack?

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 }),
]

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.