Конфигурация Webpack 4 для создания нескольких приложений Aurelia внутри одного и того же / src общего модуля - PullRequest
0 голосов
/ 13 сентября 2018

У нас есть два приложения Aurelia внутри одного / src.Одно из них является основным приложением, а другое находится в подпапке, в которой используются некоторые модули основного приложения.Пожалуйста, ознакомьтесь со структурой файлов ниже, чтобы получить понимание.

enter image description here

Это работало нормально до того, как мы использовали веб-пакет 3. После того, как мы обновились до веб-пакета4 и внесли изменения в конфиг, сборка основного приложения работает как положено.Но когда мы создаем вспомогательное приложение, в выходную папку для вспомогательного приложения встраиваются те же основные пакеты приложений.

Ниже приведен код нашего файла webpack.config.ts

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const { ProvidePlugin } = require('webpack');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader');

// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
  condition ? ensureArray(config) : ensureArray(negativeConfig);

// primary config:
const title = 'Aurelia Navigation Skeleton';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';

const cssRules = [
  { loader: 'css-loader' },
];

module.exports = ({ production, server, extractCss, coverage } = {}) => ({
  mode: production ? 'production' : 'development',
  resolve: {
    extensions: ['.ts', '.js'],
    modules: [srcDir, 'node_modules'],
    plugins: [new TsConfigPathsPlugin()]
  },
  entry: {
    app: ['./ie-polyfill', 'aurelia-bootstrapper'],
    vendor: ['bluebird'],
  },
  output: {
    path: outDir,
    publicPath: baseUrl,
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].bundle.map',
    chunkFilename: '[name].chunk.js'
  },
  optimization: {
    minimize: production ? true : false,
  },
  devServer: {
    contentBase: outDir,
    // serve index.html for all 404 (required for push-state)
    historyApiFallback: true
  },
  devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
  module: {
    rules: [
      // CSS required in JS/TS files should use the style-loader that auto-injects it into the website
      // only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
      {
        test: /\.css$/i,
        issuer: [{ not: [{ test: /\.html$/i }] }],
        use: extractCss ? ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: cssRules
        }) : ['style-loader', ...cssRules],
      },
      {
        test: /\.css$/i,
        issuer: [{ test: /\.html$/i }],
        // CSS required in templates cannot be extracted safely
        // because Aurelia would try to require it again in runtime
        use: cssRules
      },
      { test: /\.html$/i, loader: 'html-loader' },
      { test: /\.ts$/i, loader: 'awesome-typescript-loader', exclude: nodeModulesDir },
      { test: /\.json$/i, loader: 'json-loader' },
      // use Bluebird as the global Promise implementation:
      { test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
      // embed small images and fonts as Data Urls and larger ones as files:
      { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
      // load these fonts normally, as files:
      { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
      ...when(coverage, {
        test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
        include: srcDir, exclude: [/\.{spec,test}\.[jt]s$/i],
        enforce: 'post', options: { esModules: true },
      })
    ]
  },
  plugins: [
    new AureliaPlugin(),

    new ProvidePlugin({
      'Promise': 'bluebird'
    }),

    new ModuleDependenciesPlugin({
      'aurelia-testing': ['./compile-spy', './view-spy'],
      'aurelia-orm': [
        './component/association-select',
        './component/paged',
        './component/view/bootstrap/association-select.html',
        './component/view/bootstrap/paged.html',
      ],
      "aurelia-syncfusion-bridge": [
        "./grid/grid",
        "./grid/column",
        "./common/template"
      ],
      "aurelia-authentication": [
        "./authFilterValueConverter"
      ]
    }),

    new CheckerPlugin(),

    new HtmlWebpackPlugin({
      template: 'index.ejs',
      minify: production ? {
        removeComments: true,
        collapseWhitespace: true,
        collapseInlineTagWhitespace: true,
        collapseBooleanAttributes: true,
        removeAttributeQuotes: true,
        minifyCSS: true,
        minifyJS: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        ignoreCustomFragments: [/\${.*?}/g]
      } : undefined,
      metadata: {
        // available in index.ejs //
        title, server, baseUrl
      }
    }),

    ...when(extractCss, new ExtractTextPlugin({
      filename: production ? '[contenthash].css' : '[id].css',
      allChunks: true
    })),

    ...when(production, new CopyWebpackPlugin([
      { from: 'static/favicon.ico', to: 'favicon.ico' }
    ]))

   ]
  });

Вот код webpack.subapp.config.ts

const path = require('path');
const webpackConfig = require('./webpack.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
var originalConfig = webpackConfig({});

const outDir = path.resolve(__dirname, project.platform.output+'/associate');
const srcDir = path.resolve(__dirname, 'src');


module.exports = () => {
  let config = originalConfig;
  // output files without hashes
  config.resolve.modules.push(
    path.resolve(__dirname, 'src/associate')
  );
  //config.resolve.modules = [srcDir + '/associate', srcDir, 'node_modules'];
  config.output.path = outDir;
  config.output.filename = '[name].bundle.js';
  config.plugins.splice(config.plugins.indexOf(HtmlWebpackPlugin));
  config.plugins = [
    // first clean the output directory
    new CleanWebpackPlugin([config.output.path + '/associate']),
    ...config.plugins
  ];

  return config;
};

Проблема в том, что main.ts основного приложения является точкой входа, и она не работала, даже когда мы пробовали несколько точек входа.

Когда мы удалили файл main.ts из папки src, сборка вспомогательного приложения работала отлично, а пакет создавался правильно.

Итак, проблема в том, что он берет main.ts основного приложения.Мы попытались исключить его в конфигурации следующим образом:

congif.exclude = [srcDir + '/main.ts'];

, а затем

config.module.rules[3].exclude = [srcDir + '/main.ts'];

Но ничего не получилось.

Пожалуйста, помогите найти, как исключить main.tsиз / src в webpack.subapp.config.ts

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...