在 Webpack 中编译多个 Elm 项目

Question

我是运行 Phoenix 服务器，Webpack 配置文件的部分内容如下所示：

entry: {
  'elm-db': './elm-db/src/Main.elm',
  'elm-ledger': './elm-ledger/src/Main.elm',
},
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../priv/static/js'),
  publicPath: '/js/',
},

module: {
  rules: [
    {
      test: /\.elm$/,
      exclude: [/elm-stuff/, /node_modules/],
      use: {
        loader: 'elm-webpack-loader',
        options: {
          cwd: path.resolve(__dirname, 'elm-db'),
          debug: options.mode === "development",
          optimize: options.mode === "production",
        },
      },
    },
  ]
},

我有两个 Elm 项目，elm-db 和 elm-ledger。我已经设法将 elm-db 正确添加到配置文件中，并且它可以很好地编译项目。但是，我也一直未能添加“elm-ledger”。上面的代码生成了一个正确的 elm-db.js 文件，但是编译 elm-ledger.js returns 错误，可能是因为我无法创建正确的 cwd 字段。我找不到有关 cwd.

配置的任何文档

Answer 1

不确定这是否有帮助，但我们正在使用旧版本 "elm-webpack-loader": "^6.0.1"（最新版本可能配置不同）


const elmPath = path.resolve(__dirname, './node_modules/.bin/elm');
const srcPaths = [
  path.resolve(__dirname, './app1'),
  path.resolve(__dirname, './app2'),
  path.resolve(__dirname, './app3'),
];

const elmRules = srcPaths.map(featurePath => ({
  test: new RegExp(`^${featurePath}.*elm$`),
  include: featurePath,
  exclude: [/elm-stuff/, /node_modules/],
  use: [
    {
      loader: require.resolve('elm-webpack-loader'),
      options: {
        pathToElm: elmPath,
        cwd: featurePath,
        // other options
      },
    },
  ],
}));

然后你在 Webpack 配置规则中传播 ...elmRules

在 Webpack 中编译多个 Elm 项目

Compiling more than one Elm project in Webpack

elm

webpack

phoenix-framework