Search code examples
angularconfigurationwebpackfilenamesvendor

Trouble with Webpack when filename has more than three dots

I thinhk I have a really rare trouble when i do npm webpack --progress

Before using datatables I had no error with vendor js files. (this code is in entry property in webpack.config.js)

vendor: [
        './src/resources/tema/js/jquery.js',
        './src/resources/tema/js/bootstrap.min.js,
]

After importing jQuery DataTable it generate with errors. This errors does not be specific. literally it does no gave relevant information

vendor: [
        './src/resources/tema/js/jquery.js',
        './src/resources/tema/js/bootstrap.min.js',
        './src/resources/DataTables-1.10.13/media/js/jquery.dataTables.js',
        './src/resources/DataTables-1.10.13/media/js/dataTables.buttons.min.js',
        './src/resources/DataTables-1.10.13/media/js/buttons.flash.min.js',
        './src/resources/DataTables-1.10.13/media/js/jszip.min.js',
        './src/resources/DataTables-1.10.13/media/js/pdfmake.min.js',
        './src/resources/DataTables-1.10.13/media/js/vfs_fonts.js',
        './src/resources/DataTables-1.10.13/media/js/buttons.html5.min.js',
        './src/resources/DataTables-1.10.13/media/js/buttons.print.min.js'
    ]

The rare is that when I comment the lines where the filename has three dots, webpack generate without error. Someone with the same problem.

Thanks in advance.

Solution

  • Some of the modules you're using depend on npm packages. It seems that you need datatables.net and datatables.net-buttons.

    You can install them with:

    npm install --save datatables.net datatables.net-buttons

    You should also consider not using the minified dependencies, but the npm modules instead. This makes dependency management easier, so you can easily upgrade or remove them. See DataTables - NPM packages for the instructions. It also makes debugging easier as you'll get meaningful errors. Webpack can be used to minify/uglify your entire code, including dependencies, for your production build. For more information see Building for Production.

    Just a hint for the use with webpack: If you add any module to the vendor entry array, it will also resolve it correctly. So every module you would import with require you can specify as an entry point as well, without needing the concrete path.