M
M
Maxim Kudryavtsev2021-05-17 01:27:31
JavaScript
Maxim Kudryavtsev, 2021-05-17 01:27:31

What does the path to csj.js mean in Webpack build output?

Yesterday I started to understand Webpack. The docs and Google are great so far, but I can't seem to find a description of the Webpack output format in the docs.

After successfully building all the files, Webpack outputs the following:
60a19b787f867308801850.png

Tell me what the lines mean:

css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./styles/main.scss
css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./styles/check.css


Here is my config:
webpack.config.js

'use strict'; // eslint-disable-line

console.log('Webpack v5 Upgrade');

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');

const config = require('./config');

const isUnderDevelopment = true;

let webpackConfig = {
    mode: 'development',
    context: path.resolve(__dirname, '../'),
    // devtool: isUnderDevelopment ? 'inline-source-map' : '',
    entry: [
        './scripts/main.js',
        './styles/main.scss',
        './styles/check.css',
    ],
    output: {
        path: path.resolve(__dirname, '../../dist'),
        filename: '[name].bundle.min.js'
    },
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.s?[ca]ss$/,
                use: [
                    miniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new miniCssExtractPlugin({ filename: '[name].whirehouse.css'}),
    ],

};

module.exports = webpackConfig;


Did I somehow set up my config crookedly, so that Webpack climbs to check js-files inside the node_modules directory?

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