webpack - 凤凰框架中 Webpack 不编译 Elm 文件

Question

我刚刚将我的 elm 文件从手动编译转换为通过 Webpack 自动编译，因为它捆绑在 Phoenix 框架中。

问题是重新编译效果不好。如果我删除所有缓存文件和编译输出，它有时会重新编译，但通常不会。看起来输出文件是直接从某个地方（我不知道在哪里）复制的，没有进行任何编译。

这是我的 webpack.config.js 文件：

const path = require('path');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  const srcPaths = [
    path.resolve(__dirname, './elm-db'),
    path.resolve(__dirname, './elm-ledger'),
  ];

  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: {
          cwd: featurePath,
          debug: options.mode === "development",
          optimize: options.mode === "production",
        },
      },
    ],
  }));

  return {
    optimization: {
      minimizer: [
        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
        new OptimizeCSSAssetsPlugin({}),
      ]
    },
    entry: {
      // 'app': './js/app.js',
      'main': './sass/main.sass',
      'db': './sass/db.sass',
      'ledger': './sass/ledger.sass',
      'client-db': './js/client_db.js',
      'client-ledger': './js/client_ledger.js',
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/',
    },
    devtool: devMode ? 'inline-source-map' : undefined,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          }
        },
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            { loader: 'css-loader', options: {} },
            { loader: 'sass-loader', options: {} },
          ],
        },
      ].concat(elmRules)
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    ].concat(devMode ? [new HardSourceWebpackPlugin()] : []),
  }
};

这是我的 client_db.js 文件：

import clientDb from "./routes_db"

import socket from "./socket"

let db_channel = socket.channel("ledgers", {})

db_channel.join()
    .receive("ok", resp => {
        console.log("Joined successfully", resp)
        clientDb(db_channel)
    })
    .receive("error", resp => { console.log("Unable to join", resp) })
    .receive("timeout", () => console.log("Networking issue. Still waiting..."))

这是 routes_db.js 的开始：

import { Elm } from "../elm-db/src/Main.elm"

let clientDb = (channel) => {
    console.log("CONNECTED")

    const app = Elm.Main.init()

    app.ports.loadLedgers.subscribe(() => {
        channel.push("load_ledgers", {})
    })
...

标签： webpackphoenix-frameworkelm