Answer the question
In order to leave comments, you need to log in
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:
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
'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;
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question