J'utilise rxjs@6.5.1 code> (
webpack@4.30.0 code>) uniquement dans un endroit avec cette importation:
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var GlobEntries = require('webpack-glob-entries');
var ManifestPlugin = require('webpack-manifest-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var HtmlWebpackPlugin = require('html-webpack-plugin');
var entriesRest = {
"style": "./assets/css/style.scss",
};
var entries = GlobEntries('./assets/js/entries/**/*.ts');
const outputDir = 'public';
const plugins = [
new HtmlWebpackPlugin(),
new webpack.ProgressPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
popper: 'popper',
"window.popper": 'popper',
Popper: 'popper',
"window.Popper": 'popper',
}),
new MiniCssExtractPlugin({
filename: '../css/style-[contenthash].css',
}),
new CleanWebpackPlugin(),
new ManifestPlugin({
// publicPath:'../../',
fileName: '../../' + outputDir + '/manifest.json',
generate: (seed, files) => {
const entrypoints = new Set()
files.forEach(
(file) => ((file.chunk || {})._groups || []).forEach(
(group) => entrypoints.add(group)
)
)
const entries = [...entrypoints]
const entryArrayManifest = entries.reduce((acc, entry) => {
const name = (entry.options || {}).name
|| (entry.runtimeChunk || {}).name
const files = [].concat(
...(entry.chunks || []).map((chunk) => chunk.files)
).filter(Boolean)
return name ? {...acc, [name]: files} : acc
}, seed)
return entryArrayManifest
}
}),
new CopyWebpackPlugin([
{from: 'node_modules/ckeditor', to: 'ckeditor'},
{from: 'assets/img', to: '../img'},
{from: 'assets/index.php', to: '../index.php'},
{from: 'assets/cron-20min.php', to: '../cron-20min.php'},
{from: 'assets/js/ads.js', to: '../js/ads.js'},
{from: 'assets/.htaccess', to: '../[name].[ext]'},
]),
];
module.exports = (argv, env) => {
return {
plugins: [
...plugins,
env.mode === 'development' ? new BundleAnalyzerPlugin() : [],
],
entry: Object.assign(entriesRest, entries),
optimization: {
splitChunks: {
chunks: "all"
},
},
devtool: env.mode === 'development' ? 'eval' : '',
output: {
path: path.resolve(__dirname, outputDir + "/js/"),
filename: '[name]-[chunkhash].js',//-[hash:6]
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
transpileOnly: true
}
},
{
test: /\.scss$/i,
include: [
path.resolve(__dirname, "assets/css/style.scss"),
],
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader', 'sass-loader'
]
},
{
test: /\.scss$/i,
exclude: [
path.resolve(__dirname, "assets/css/style.scss"),
],
loader: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff&name=../css/fonts/[name].[ext]"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff&name=../css/fonts/[name].[ext]"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=../css/fonts/[name].[ext]"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?name=../css/fonts/[name].[ext]"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=../css/fonts/[name].[ext]"
},
{
test: /\.(jpe?g|png|gif|svg|cur)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=../img/[name].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{test: /\.twig$/, loader: "twig-loader"}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
alias: {
'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui'),
}
}
};
};
3 Réponses :
J'ai eu les mêmes problèmes il y a quelques jours. Vous ne devez pas utiliser communJs code> comme compiléroption.Module pour votre TSCONFIG. Essayez
ES2015 code> ou
esnext code> avec noeud moduleresolution. P>
Essayé les deux - le même résultat: /
Avez-vous essayé de reconstruire le projet, puis d'analyser le script d'analyse?
Je l'ai confirmé à partir de Codesandbox React-TS minimal Projet avec RXJS
My RxJS Taille est de 9,7 Ko après avoir utilisé ce code
Mes options de compilateur TSCONFIG.JSON sont P> p>
compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"noImplicitAny": false,
"allowJs": true,
"skipLibCheck": true,
"strictNullChecks": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
}
Les paramètres dont j'ai besoin dans les compiléroptions TSCONFIG sont les suivants:
"module": "es6", "moduleResolution": "node",
Normalement, nous évitons d'importer de cette façon. Pouvez-vous essayer
importer debouncetime de "rxjs / opérateurs / debouncimetime"; CODE> Si la bibliothèque est activée pour avoir une importation comme celle-ci, il n'y a pas besoin de WebPack ni d'autres outils à configurer.
Ce type d'importation ne fonctionne pas. Il cherche
rxjs-compat code>
Quelle version de WebPack utilisez-vous?
webpack@4.30.0 code>