I got into a stupor about how to even connect the cdn library in the webpack through the documentation, I realized that https://webpack.js.org/configuration/externals/ extends to install and the documentation describes only the js file and it’s not clear if bootstrap or materialize where There are css and js files prefixed with a prefix and the second point is the path for cdn to define for the abbreviation in webpack

const path = require('path'); module.exports = { entry: './src/header.js', output: { path: path.resolve(__dirname, 'public'), filename: 'bundle.js', }, module: { rules: [ { test: /\.jsx$/, loader: 'babel-loader', exclude: /\/node_module\// }, ] }, devtool: 'source-map', context: __dirname, watch: true, watchOptions: { aggregateTimeout: 300 } };
I do not know whether this configuration is necessary or not in src / header.js

 import templaet from 'header.pug'; class Header{ constructor(name, path, typeCDN){ this.name = name; this.path = path; this.type = typeCDN; } } let arr = []; /** Попробовал так */ let jquery = new Header('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', 'js'); let materializeCss = new Header('materialize-js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', 'js'); let materializeJs = new Header('materialize-css', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css', 'css'); let icon = new Header('materialize-icon', 'https://fonts.googleapis.com/icon?family=Material+Icons', 'css'); arr.push(jquery, materializeCss, materializeJs, icon); console.log(arr);

I just don’t understand how to connect all these settings or does it only affect the connection of components?

  • The section externals in the documentation refers to advanced use, for a simple connection of libraries there is a simpler way. It looks like this: install the npm module for the required library, for example, the module materialize-css : npm install materialize-css . Then, in the main js file, we write import 'materialize-css' and the webpack, in theory, should itself collect all the css and js files and include them on the page at the right place - diraria
  • There I did merging for js and css and here I have a problem - Ruslan
  • @diraria Is there an example of how this should be? I just installed it on npm and connected import import 'materialize-css' to src / header.js; But all my styles have flown. I don’t understand at all the webpack for node. For some simple where there is no node, everything becomes easier there. and here there are some difficulties appeared with compilation and so on. - Ruslan

0