使用 webpack 捆绑环回答案

【问题标题】：Bundle loopback using webpack使用 webpack 捆绑环回
【发布时间】：2020-04-27 10:32:33
【问题描述】：

我正在使用 "webpack": "^4.43.0" 来捆绑我的 loopback-3 应用程序。我可以毫无问题地运行 webpack 命令并执行它，但是在运行捆绑文件后出现以下错误：

Error: ENOENT: no such file or directory, lstat 'D:\cldr'

这里是webpack.conf.js内容：

const path = require('path');
const LoopbackBootPlugin = require('loopback-webpack-plugin');

module.exports = {
  target: 'node',
  entry: './server/server.js',
  mode: 'production',
  resolve: {
    extensions: ['.js', '.json'],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: `bundle.js`,
  },
  optimization: {
    minimize: false
  },
  plugins: [
    new LoopbackBootPlugin()
  ]
};

我尝试添加

alias: {
      cldr$: 'cldrjs',
      cldr: 'cldrjs/dist/cldr'
    }

解决属性，但仍然无法正常工作。

【问题讨论】：

标签： node.js webpack loopbackjs webpack-4

【解决方案1】：

来自 LoopBack 团队的问候 ?

LoopBack 不支持通过 Webpack 打包，仅支持 Browserify。

在启动时，LoopBack 使用动态路径加载文件，因此它需要与捆绑器进行自定义集成，以确保动态加载的工件包含在浏览器包中并且可以通过 loopback-boot 加载。

来自https://loopback.io/doc/en/lb3/Using-Browserify.html的交叉发帖：

构建步骤会加载所有配置文件，合并来自其他配置文件（如 app.local.js）的值，并生成一组可用于启动应用程序的指令。

这些说明必须与来自models/ 和boot/ 的所有配置脚本一起包含在浏览器包中。

不用担心，您不必了解这些细节。只需致电boot.compileToBrowserify()，它会为您处理一切。

var browserify = require('browserify');
var boot = require('loopback-boot');

var b = browserify({
  basedir: appDir,
});

// add the main application file
b.require('./browser-app.js', { expose: 'loopback-app' });

// add boot instructions
boot.compileToBrowserify(appDir, b);

// create the bundle
var out = fs.createWriteStream('browser-bundle.js');
b.bundle().pipe(out);
// handle out.on('error') and out.on('close')

您可以在loopback-boot/lib/bundler.js 中找到compileToBrowserify 的来源。我认为应该可以调整脚本以使用 Webpack 而不是 Browserify API，但我从未尝试过，所以 YMMV ?‍♂️

【讨论】：