Webpack 配置，用于为 Node 和 Browser 构建 sdk

Question

有人可以帮助我弄清楚应该是什么 webpack sdk 配置来为 Web 和浏览器构建 SDK？

我当前的配置如下所示

const path = require('path');
let baseConfig = {
mode: 'production',
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'sdk/js-sdk.js',
libraryTarget: 'umd',
library: 'jsSdk',
globalObject: 'this'
},
resolve: {
extensions: [ ".ts", ".js"]
},
externals: {
"request-promise-native": "request-promise-native",
"request": "request"
},
module: {
rules: [
{ test: /.ts$/, use: 'ts-loader' }
]
}
}
module.exports = baseConfig

我正在使用以下命令构建

"pn-dev-build": "rm -rf dist && npm version patch && webpack --mode=development && npm publish --registry http://localhost:4873",

然后，如果我将其安装在我的 vue-nuxt 项目中，它会给出以下错误

• ./node_modules/request/lib/har 中的 fs .js友好错误 09：06：34
• net in ./node_modules/forever-agent/index.js， ./node_modules/tough-cookie/lib/cookie.js 和其他 1
  个友好错误 09：06：34
• ./node_modules/forever-agent/index.js、./node_modules/tunnel-agent/index.js 中的 TLS

有人可以帮助我解决上述错误吗？

Answer 1

多入口点方法在这里不是最好的主意，因为您要捆绑具有相同配置的两个不同目标(节点和浏览器(

最好是导出一个具有两个配置的数组，如下所示(在此应用程序中，您可以使用多个入口点来拆分浏览器捆绑包和其他内容，以使您的网站性能正常(

在webpack.config.js中 ( 使用此文件作为 Webpack 配置(

const webpackBrowserConfig = require("./webpack.config.browser.js");
const webpackServerConfig = require("./webpack.config.server.js");
module.exports = [webpackServerConfig, webpackBrowserConfig];

在webpack.config.browser.js

module.exports = {
target: 'web',
mode: 'production',
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
// your browser related config
},
resolve: {
extensions: [ ".ts", ".js"]
},
externals: {
"request-promise-native": "request-promise-native",
"request": "request"
},
module: {
rules: [
{ test: /.ts$/, use: 'ts-loader' }
]
}
}

并在webpack.config.server.js

module.exports = {
target: 'node',
mode: 'production',
entry: './src/serverIndex.ts',
output: {
path: path.resolve(__dirname, 'dist')
// your server related config
},
resolve: {
extensions: [ ".ts", ".js"]
},
externals: {
"request-promise-native": "request-promise-native",
"request": "request"
},
module: {
rules: [
{ test: /.ts$/, use: 'ts-loader' }
]
}
}

您也可以在同一文件中创建它并减少一些重复(以适合您的为准( 为了清楚起见，我用两个不同的文件展示了这种方法

Answer 2

创建一个文件作为服务器的入口点，另一个文件作为浏览器的入口点。

let baseConfig = {
mode: 'production',
entry: ['browser.ts','server.ts'],
...
}

browser.ts 包含所有特定于浏览器的逻辑，server.ts 包含所有特定于服务器的 logi。