У нас есть два приложения Aurelia внутри одного / src.Одно из них является основным приложением, а другое находится в подпапке, в которой используются некоторые модули основного приложения.Пожалуйста, ознакомьтесь со структурой файлов ниже, чтобы получить понимание.
Это работало нормально до того, как мы использовали веб-пакет 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