Feeling exhausted from downloading js and css libraries manually each time, I decided to explore npm and webpack when starting a react project. However, I encountered some challenges:
While using
npm installis convenient, I still need to locate where the css/js/scss files are placed:node_modules\materialize-css\sass\materialize.scss node_modules\materialize-css\dist\js\materialize.min.js node_modules\sweetalert\dist\sweetalert.min.js node_modules\sweetalert\dist\sweetalert.css node_modules\hint.css\hint.min.css ...I have to find the correct path myself and add it to
index.htmlor import it inindex.js, similar to the previous method (though it does save time searching for library download links).Many js libraries include css files, but integrating both css and js in webpack is not straightforward:
For example, refer to webpack-import-bootstrap-js-and-css, where adding css import requires a significant amount of configuration code. Why not simply include the css in
index.html? It's just one line. However, separating js and css imports into different files also feels cumbersome.
I wish there was a simpler way:
Run
npm install --save sweetalertAdd webpack configuration that looks something like this (without needing to know the structure of a library):
... new webpack.ProvidePlugin({ swal: "sweetalert", use_css: true, // false for those who require custom themes use_js: true }), ...
Unfortunately, I haven't discovered an optimal solution yet.