webpack 的打包target讲解 & node环境打包下的文件存储造成不易察觉的坑点

背景

electron 主渲进程的打包，以及 preload 的打包，还有注入脚本的打包，这些东西 webpack 本身是自带的，这里主要讲一下 target: node 模式

代码

https://gitee.com/sen2020/webpack-demo/tree/feature%2Fnode-code-package/

node 模式

1. 平时打包都是 web 模式，web 模式必须由 web 服务输出到浏览器来渲染， 而 webpack 可以面向多种打包模式，其中针对 electron 就给出了三种 electron-main，electron-renderer，electron-preload，同时针对 node，给出了两种，一种是 node，一种是 node-async，后者适用于模块化的服务，例如有插件模块的 node 框架。

node 模式打包注意点

其中 node 这里给的__dirname 意思是不让替换的意思，否则会按照相对路径 / 进行转换；

// 设置目标环境为 Node.js
target: 'node',
node: {
    __dirname: false,
    __filename: false,
},

webpack 打包默认