Question

我们在同一个/ src中有两个Aurelia应用程序。一个是主应用程序，另一个在子文件夹中，该子文件夹使用主应用程序的某些模块。请查看下面的文件结构以了解情况。

在使用webpack 3之前，此方法运行良好。在升级到webpack 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是入口点，即使我们尝试了多个入口点，它也无法正常工作。

当我们从src文件夹中删除main.ts时，子应用程序的构建工作正常，并且捆绑包正确创建。

所以问题是它正在占用主应用程序的main.ts。我们尝试通过以下方法将其排除在配置中

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

然后

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

但是没有一个。

请帮助找到如何在webpack.subapp.config.ts中排除/ src的main.ts

Webpack 4配置可在同一/ src共享通用模块内构建多个Aurelia应用

0 个答案: