How to add npm weather-icons to a page?

K

kirillleogky2019-12-07 14:50:22

JavaScript

kirillleogky, 2019-12-07 14:50:22

Tell me how to solve the problem of the broken weather-icons package on the page?

Flooded version with an error - weary-chance.surge.sh

My error:

How I included this min.css:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Weather</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="node_modules/weather-icons/css/weather-icons.min.css">
</head>

<body>
  <script src="dist/main.js"></script>
</body>
</html>

My webpack config:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
  rules: [
    {
      test: /\.js$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
    },
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
       loader: 'babel-loader',
       options: {
        presets: ['@babel/preset-env']
       }
      }
    },
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    },
    {
      test: /\.(jpg|png|svg)$/,
      loader: 'url-loader',
      options: {
       name: 'img/[name].[ext]',
      },
    }
  ],
 }
};