It's important to first say that everything was working, but it somehow just broke.
I am trying to get standalone css files and will include them in my index.html file
But the css is still loaded inline in main.bundle.js, but the css is missing from the page. I've noticed in main.bundle.js I see a lot of "\n"
padding-right: 15px;\n}\n.btn.content-btn::before {\n position: absolute;\n
I know this webpack file is messy but I have been trying different variations for hours.
I am new to wepback so I would appreciate some help. I am using webpack 5.68.0
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const Dotenv = require('dotenv-webpack');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// css twice [CONTENTS]
module.exports = {
mode: 'development',
//devtool: 'inline-module-source-map',
devtool: 'source-map',
entry: [
'./src/index.js'
],
output: {
// path: __dirname + '/dist',
path: __dirname + '/public',
publicPath: '/',
filename: '[name].bundle.js',
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'async',
minSize: 60000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
cacheGroups: {
// styles: {
// name: 'styles',
// test: /\.s?css$/,
// chunks: 'all',
// minChunks: 1,
// reuseExistingChunk: true,
// enforce: true,
// },
vendor: {
test: /node_modules/,
name: 'vendor',
chunks: 'initial',
enforce: true
},
vendorModules: {
test: /src\/js\/modules/,
name: 'vendor-modules',
chunks: 'initial',
enforce: true
}
}
}
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
// use: [
// 'babel-loader',
// 'eslint-loader',
// ]
use: [
{
loader: 'babel-loader',
},
// {
// loader: 'eslint-webpack-plugin',
// options: {
// quiet: true
// }
// }
]
},
{
test: /\.ts$/,
use: ['babel-loader']
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
// {
// loader: MiniCssExtractPlugin.loader,
// options: {
// publicPath: __dirname + '/public',
// },
// },
// {
// loader: 'css-loader',
// options: {
// importLoaders: 2,
// sourceMap: true
// }
// },
// {
// loader: "sass-loader",
// options: {
// sourceMap: true,
// sassOptions: {
// indentWidth: 2,
// includePaths: ["src/styles"],
// },
// },
// },
],
},
// {
// test: /\.s[ac]ss$/i,
// //test: /\.scss$/,
// //test: /\.s[ac]ss$/i,
// exclude: /node_modules/,
// use: [
// {
// loader: 'file-loader',
// options: { outputPath: 'css/', name: '[name].min.css'}
// },
// 'style-loader',
// {
// loader: "sass-loader"
// }
// ]
// },
// {
// test: /\.s[ac]ss$/i,
// use: [
// // something is making styles show up twice. I don't want style loader loads twice???
// "style-loader", // Creates `style` nodes from JS strings
// "css-loader", // Translates CSS into CommonJS
// {
// loader: 'sass-loader',
// options: {
// sourceMap: true
// }
// }, // Compiles Sass to CSS
// ],
// },
{
test: /\.svg$/,
loader: 'svg-inline-loader'
}
// {
// test: /\.svg$/,
// use: [
// {
// loader: 'svg-url-loader',
// options: {
// limit: 10000,
// },
// },
// ],
// },
]
},
resolve: {
extensions: ['.js', '.jsx', ".ts"],
fallback: {
"fs": false,
"os": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"browser": false,
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer"),
"crypto": false,
"crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
}
},
devServer: {
allowedHosts: [
'learntoearn.dev',
],
historyApiFallback: true,
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 8080,
},
plugins: [
new MiniCssExtractPlugin( // split css into files
{
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
}
),
//new BundleAnalyzerPlugin(),
new ESLintPlugin(),
new Dotenv(),
new ESLintPlugin({
quiet: true,
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
// template: __dirname + '/src/index.html',
filename: 'index.html',
inject: false // BROKE AGAIN FOR SOME REASON, SO SETTING TO TRUE
//inject: 'body' // causing styles to be loaded twice!
})
]
};