一起运行后端（Elixir）和前端（Angular 8）答案

【问题标题】：Run backend (Elixir) and frontend (Angular 8) together一起运行后端（Elixir）和前端（Angular 8）
【发布时间】：2019-12-12 16:18:44
【问题描述】：

我创建了一个带有 Elixir 和 Phoenix 后端以及 Angular 8 前端的应用程序，通过 REST API 连接。最初，我将它们分开运行（mix phx.server 和 ng serve 作为单独的命令），但我认为在开发和生产中一起运行它们会更容易。我已经使用 Elm 前端的以前的 Elixir 应用程序这样做了，我只需要运行 mix phx.server 来启动后端和前端。

我使用 webpack，我知道它将 main.ts 文件捆绑到 main.js 中。但是，当我启动应用程序时，它会发送所有 html 文件的 get 请求，例如localhost:4000/app.component.html。

在我尝试遵循的示例 (https://github.com/akeating/peap) 中，它在 html 文件中导入了 runtime.js、vendor.js 和 style.js。我还没有弄清楚如何在不直接运行ng serve 时创建它们，所以目前我根据之前创建的dist 文件将它们包含在webpack 中（我认为这不是最佳或正确的）。一起运行后端（Elixir）和前端（Angular 8） - Thinbug

我的 webpack 配置如下所示：

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
//const ProvidePlugin = require('provide-plugin');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const mainPath = path.resolve('angular', 'src', 'app')
const mainEntryFile = path.join(mainPath, 'main.ts')

const HtmlWebpackPlugin = require("html-webpack-plugin")
const helpers = require('./helpers')

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    main: './angular/src/main.ts',
    runtime: './angular/dist/<app-name>/runtime.js',
    vendor: './angular/dist/<app-name>/vendor.js',
    styles: './angular/dist/<app-name>/styles.js'
    //'./js/app.js': './src/main.ts'
    //'./js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, '../priv/static')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      //{ test: /[\/\\]@angular[\/\\].+\.js$/, parser: { system: true } },
      {
        test: /\.ts?$/,
        exclude: /node_modules/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: './angular/tsconfig.json',
            cwd: path.resolve(__dirname, 'angular', 'src')}
          },
        ]
      },
      { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },
      { test: /\.html$/, loaders: ['raw-loader'] },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {loader: 'css-loader', options: { minimize: true } }
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
         ]
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {}
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
    new webpack.ContextReplacementPlugin(
        /\@angular(\\|\/)core(\\|\/)fesm5/,
        helpers.root('./src')
    ),
    new CleanWebpackPlugin({
       dry: true,
     })
    //new webpack.NoEmitOnErrorsPlugin()
  ]
});

任何正确方向的帮助或指示将不胜感激。

【问题讨论】：

标签： angular webpack elixir phoenix

【解决方案1】：

可能是因为您尝试遵循的代码非常旧。当前版本的 phoenix 默认使用 webpack 来管理 js 依赖项。因此，任何 webpack 配置都无需任何更改即可工作。默认设置是在运行 phoenix 服务器时同时运行 webpack 服务器。所以不要改变凤凰方面的任何东西。继续，将您的 Angular 应用程序移动到 /assets，并在同一文件夹中配置 webpack。它会简单地工作

【讨论】：