在 Phoenix 框架中，Webpack 不会编译 Elm 文件

编程问答 2022-04-29

问题描述

我刚刚通过 Webpack 将我的 elm 文件从手动编译转换为自动编译，因为它捆绑在 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',].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",{})
    })
...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

elmphoenix-frameworkwebpackwebpackwebpack