Webpack打包Node.js遇到的一个问题

问题背景

1. 使用技术栈： typescript、Node.js、Webpack
2. 问题描述：
   在之前做脚手架开发的时候，遇到的一个问题：在 node 代码里头写了

   #! /usr/bin/env node
   

   但是使用 webpack 打包之后，这句话没有被在打包之后的文件里头。要执行打包后的文件，就需要手动的加入这句话。这显然是一个很蠢的解决方式。
3. 遇到的困难：不知道怎么用搜索引擎描述这样的问题，我觉得肯定有人遇到过这样的问题，但是我不知道怎么检索这类问题，就像我记录这个问题的时候，我都不知道应该起一个什么样的标题。我觉得最难的问题就是你不知道怎么用搜索引擎能懂的方式去描述你的问题。

解决方法

在我绝望之际，死马当活马医，直接把 webpack #! /usr/bin/env node 当做搜索的关键字，就发现了一些蛛丝马迹，他直接给我推荐了一个 npm 库（一个 webpack 插件）—— webpack-shebang-plugin

使用起来还是很简单，就是在 webpack.config.js 中配置这个插件就可以了

const ShebangPlugin = require('webpack-shebang-plugin');

module.exports = {
	plugins: [
    	// ...other webpack plugins
    	new ShebangPlugin()
	]
}

更多探索

在解决问题之后，我又好奇的看了一下他的实现，源码很短， 不到一百行，发现了一些小细节

1. webpack 版本必须大于 4.0
   
2. 源码是一个类，他的构造函数实现如下：

constructor(opts = {}) {
    this.entries = {};
    this.options = {
        shebangRegExp: /[\s\n\r]*(#!.*)[\s\n\r]*/gm,
        chmod: 0o755,
        ...(opts || {})
    };
    this.shebangedAssets = {};
    if (!this.options.shebangRegExp) {
        this.options.shebangRegExp = /[\s\n\r]*(#!.*)[\s\n\r]*/gm;
    }
    if (!this.options.chmod && this.options.chmod !== 0) {
        this.options.chmod = 0o755;
    }
}

大致上是改了一下读写权限，然后用这些对那段话进行匹配
3. 这个库的实现还使用了另一个库

const { ReplaceSource } = require('webpack-sources');

看了一眼这个库源码比较多，后序有时间再研究研究。