O
O
Olha-M2021-08-15 14:19:57
JavaScript
Olha-M, 2021-08-15 14:19:57

Why in webpack, when connecting two html pages, js and css are not connected to the second?

The script with styles is included in index.html, but not in calc.html. At connection manually styles too are not visible. I worked with gulp before, this is my first webpack project, so I can't find the problem
My build

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
  	target: 'web',
  // context: path.resolve(__dirname, 'src'),
  entry: {
    main: [
      'core-js/stable',
      'regenerator-runtime/runtime',
      './src/index.js'
    ],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
    clean: true
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      images: path.resolve(__dirname, 'src/accets/images/'),
    },
  },
  devtool: 'source-map',
  devServer: {
    port: 3000,
    open: true,
    contentBase: path.join(__dirname, 'src'),
    watchContentBase: true
    },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, 'src/index.html'),
    }),
    new HtmlWebpackPlugin({
      filename: 'calc.html',
      template: path.resolve(__dirname, 'src/pages/calc.html'),
    }),
    new MiniCssExtractPlugin({
      filename: '[name].bundle.css',
    }),
    new CopyPlugin({
      patterns: [
        { 
          from: path.resolve(__dirname, 'src/accets/images'), 
          to: path.resolve(__dirname, 'dist')
        },
      ],
      })
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.html$/,
        use: [
          {
          loader: "html-loader"
          }
        ]
      },
    	],
  }
}

6118f83aaec3d961330905.jpeg
6118f85308e48537679899.jpeg

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question