Can I add two separate Elm apps to Webpack?

Learn
1

I’m running an Elixir web server with Webpack. With that I have two separate Elm apps that live and are compiled separately, i.e. it’s two projects with separate elm.json files. So far I’ve compiled them using a make file, but I’d like to incorporate them in Phoenix’s Webpack config file.

This is what I’ve tried so far, and it is failing:

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: {
          files: [
            'elm-db/src/Main.elm',
            'elm-ledger/src/Main.elm',
          ].map(name => path.resolve(__dirname, name)),
          debug: options.mode === "development",
          optimize: options.mode === "production",
        },
      },
    },
  ]
},

Obviously, Webpack can’t find the corresponding source files for respective project. Compiling two apps to a single javascript file seems easy enough, but I can’t find any instructions how to make Webpack compile to two separate javascript files.

2

Yes, we do this. However we use TS files as entry e.g.

entry: {
  'elm-db': './elm-db/src/main.ts',
  'elm-ledger': './elm-ledger/src/main.ts',
},

And the loaders config is just:

      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: {
          loader: "elm-webpack-loader",
          options: {
            cwd: __dirname,
            optimize: ...,
          },
        },
      },
3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.