ES6 package only works on first load - webpack

Asked

Viewed 27 times

0

I built a package based on CSS3 / CSS4, HTML5 and its Apis, the package contains 101 files and uses promises to differentiate the files and measure its priority, at the end of a promise, you may or may not start another as needed, in the following format:

import(/* webpackMode: "lazy-once" */ /* webpackChunkName: "exemple1" */ /* webpackPrefetch: true */ /* webpackPreload: true */ "../module1").then(exemple1 => {
import(/* webpackMode: "lazy-once" */ /* webpackChunkName: "exemple2" */ /* webpackPrefetch: true */ /* webpackPreload: true */ "../module2").then(exemple2 => {
//code execution or do another import
});
});

The modules are like this:

export default function Exemple1() {    
//code
};
new Exemple1()

The package works perfectly without Webpack, with Webpack, only works at first access, at later accesses works partially, it was found that all modules appear in the source-map, but only a few are executed, although all of them are really necessary, The total package size not minimized is 411 kb or 652 KB on the disk, no error has been registered in the console. See the configuration files: (no dependencies required)

Package.json - Name, description, version, main file, and test file were omitted for security reasons.

{
   "private": true,
   "mode": "production",
   "main": "....",
   "name": "....",
   "description": "...",
    "version": "...",
    "scripts": {
        "test": "....",
        "dev": "npm run development",
        "development": "npx webpack",
        "watch": "npm watch",
        "prod": "npm run production",
        "production": "npx webpack"
    },
    "devDependencies": {
        "webpack": "^5.35.0",
        "webpack-cli": "^4.6.0"
    },
    "dependencies": {
        "es6-promise": "^4.2.8"
    }
}

Webpack.config.js

const path = require('path');
var webpack = require('webpack');

module.exports = {
mode: 'production',
cache: false,
devtool: 'source-map'
}

We tried a reduction in the number of pieces (generated files) with the code below, but did not solve the problem:

module.exports = {
[...]
entry: './main.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: 'js/',
    filename: 'main.js',  library: 'packgeexemple',
    sourceMapFilename: '[name].[contenthash].map',
    chunkFilename: '[name].[contenthash].js',   
    libraryTarget: 'window',
    libraryExport: 'default',
    clean: true,  
},
optimization: {
     splitChunks: {
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all',
         },
       },
     },
     },
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 5,
    }),
  ]
}

How this can be solved?

  • already tried to debug (can be a console.log) at the beginning and return of the default to see if it is returning and calling the next correctly?

  • Worse than nothing, when activating the debug in devtool, with those breaks in exception, I only see some error, if I include jquery, but find that it is not an error, jquery tests the support with error messages, mainly querySelector.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.