How can I extract CSS files from JS files with Webpack?

Question

I am using Architect UI free version.Download Link

I downloaded the file and When I ultimately run this command

npm run build

It generates all html files and an asset folder containing images and js files. In those js files CSS is embedded.

Now I want to extract the css file.

How can I generate the css file. Let me know the step by step procedure.

I was trying to use the mini-css-extract-plugin plugin but failed in generating the css file.

Help me in this regard.

Answer 1

I downloaded the package and did a little debugging.

webpack.config.js should be the following:

 'use strict'; const Path = require('path'); const Webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const ExtractSASS = new MiniCssExtractPlugin({filename:'./[name].css'}); const CopyWebpackPlugin = require('copy-webpack-plugin'); const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); const webpack = require('webpack'); const pages = require('./src/pages'); let renderedPages = []; for (let i = 0; i < pages.length; i++) { let page = Object.assign({}, pages[i]); renderedPages.push( new HtmlWebpackPlugin({ template: page.template, filename: page.output, title: page.content.title, heading_icon: page.content.heading_icon, description: page.content.description }) ); } module.exports = (options) => { const dest = Path.join(__dirname, 'architectui-html-free'); let webpackConfig = { mode: 'none', devtool: options.devtool, entry: { main: './src/app.js', demo: './src/scripts-init/demo.js', toastr: './src/scripts-init/toastr.js', scrollbar: './src/scripts-init/scrollbar.js', fullcalendar: './src/scripts-init/calendar.js', maps: './src/scripts-init/maps.js', chart_js: './src/scripts-init/charts/chartjs.js', }, output: { path: dest, filename: './assets/scripts/[name].js' }, plugins: [ new Webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Tether: 'tether', 'window.Tether': 'tether', Popper: ['popper.js', 'default'], }), new CopyWebpackPlugin({ patterns: [ { from: './src/assets/images', to: './assets/images' } ] }), new Webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(options.isProduction ? 'production' : 'development') } }) ], module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.hbs$/, loader: 'handlebars-loader', options: { helperDirs: [ Path.join(__dirname, 'src', 'helpers') ], partialDirs: [ Path.join(__dirname, 'src', 'layout'), Path.join(__dirname, 'src', 'DemoPages'), ] } }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', } ] } }; if (options.isProduction) { webpackConfig.entry = [ './src/app.js', './src/scripts-init/demo.js', './src/scripts-init/toastr.js', './src/scripts-init/scrollbar.js', './src/scripts-init/calendar.js', './src/scripts-init/maps.js', './src/scripts-init/charts/chartjs.js', ]; webpackConfig.plugins.push( ExtractSASS, new CleanWebpackPlugin(/*[dest], { verbose: true, dry: false }*/) ); webpackConfig.module.rules.push({ test: /\.scss$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] }, { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] }); } else { webpackConfig.plugins.push( new Webpack.HotModuleReplacementPlugin() ); webpackConfig.module.rules.push({ test: /\.scss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.css$/i, use: ['style-loader', 'css-loader'] }, ); webpackConfig.devServer = { port: options.port, historyApiFallback: true, hot: !options.isProduction, }; webpackConfig.plugins.push( new BrowserSyncPlugin({ host: 'localhost', port: 3002, files: ["public/**/*.*"], browser: "google chrome", reloadDelay: 1000, }, { reload: false }) ); } webpackConfig.plugins = webpackConfig.plugins.concat(renderedPages); return webpackConfig; };

We just changed some of the plugin definitions. Do a diff on the files to see what has changed.

Your package.json file should contain:

 { "name": "architectui-html-free", "version": "3.0.0", "description": "ArchitectUI - Free Bootstrap 5 Admin Dashboard Template", "author": "DashboardPack.com", "homepage": "https://dashboardpack.com", "private": false, "scripts": { "start": "webpack server", "build": "webpack --env isProduction" }, "repository": { "type": "git", "url": "git+https://github.com/DashboardPack/architectui-html-theme-free" }, "eslintConfig": { "env": { "browser": true, "node": true }, "parserOptions": { "ecmaVersion": 6, "sourceType": "module" }, "rules": { "semi": 2 } }, "dependencies": { "@fortawesome/fontawesome-free": "^6.1.1", "@fullcalendar/core": "^5.10.1", "@fullcalendar/daygrid": "^5.10.1", "@fullcalendar/interaction": "^5.10.1", "@fullcalendar/list": "^5.10.1", "@fullcalendar/timegrid": "^5.10.1", "@popperjs/core": "^2.11.4", "animate.css": "^4.1.1", "bootstrap": "^5.1.3", "chart.js": "^2.9.4", "fullcalendar": "^5.10.2", "gmaps": "^0.4.25", "jquery": "^3.6.0", "mapbox-gl": "^2.7.1", "metismenu": "^3.0.7", "moment": "^2.29.2", "pe7-icon": "^1.0.4", "perfect-scrollbar": "^1.5.5", "toastr": "^2.1.4", "wnumb": "^1.2.0", "yarn": "^1.22.18" }, "resolutions": { "**/event-stream": "^4.0.1" }, "devDependencies": { "@babel/core": "^7.17.8", "@babel/preset-env": "^7.16.11", "animate-sass": "^0.8.2", "babel-loader": "^8.2.4", "browser-sync": "^2.27.9", "browser-sync-webpack-plugin": "^2.3.0", "clean-webpack-plugin": "^4.0.0", "copy-webpack-plugin": "^10.2.4", "css-loader": "^6.7.1", "eslint": "^8.12.0", "eslint-webpack-plugin": "^3.1.1", "file-loader": "^6.2.0", "handlebars": "^4.7.7", "handlebars-loader": "^1.7.1", "html-webpack-plugin": "^5.5.0", "mini-css-extract-plugin": "^2.6.0", "nodemon": "^2.0.15", "sass": "^1.49.11", "sass-loader": "^12.6.0", "style-loader": "^3.3.1", "webpack": "^5.71.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } }

We needed to change:

 "scripts": { "start": "webpack server", "build": "webpack --env isProduction" },

So that it runs the config.isProduction build. HTML will output the following:

 <script defer src="./assets/scripts/main.js"></script><link href="./main.css" rel="stylesheet"></head>