Question

我创建了一个应用程序，该应用程序通过REST API连接了Elixir和Phoenix后端以及Angular 8前端。最初，我将它们分开运行（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）-堆栈溢出

我的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()
  ]
});

我们将不胜感激任何帮助或朝着正确方向的指点。

Answer 1

可能是因为您要遵循的代码很旧。默认情况下，当前版本的phoenix使用webpack来管理js相关性。因此，任何webpack配置都可以正常运行而无需任何更改。默认设置是在运行phoenix服务器时同时运行webpack服务器。因此，不要在凤凰方面更改任何内容。继续，将webpack配置中的角度应用程序移至/assets到同一文件夹中。它将简单地工作

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

1 个答案: