Webpack

This Webpack information is not referenced from the general menu as it’s supplemental information not directly related to Fat-Free or Bootstrap (the purpose for this site). It is linked from the Development section.

While I don’t use Webpack 5’s capability for things like templates for building single-page webapps, I do use it in this and other projects to:

combine JavaScript files into a single, minified file
combine CSS into a single, minified file
process SCSS files into a single, minified CSS file

For this site, I use Webpack to combine jQuery, the jQuery easing plugin, Bootstrap, and a site-specific JavaScript file into a single, minified JavaScript file with source map and I use Glenn Marks’ Live Sass Compiler extension for VS Code to process the SCSS.

What I want is one setup with three script commands in the package.json file to process JavaScript, SCSS, and CSS (rather than using online minifiers, which don't have maps).

Note on running scripts

Some Webpack videos on YouTube use npm start while others use npm run start to run the start script in package.json.

If there isn’t a start script in package.json (or there isn’t a package.json file) then npm start is a short-cut for running node server.js. If there is a start script in package.json, then npm runs that script.

Executing npm run start also runs the start script, using the run-script command (run is an alias for run-script) to run the script.

It’s probably simplest to always use npm run script-name.

Installing stuff for Webpack

Install the following:

npm install --save-dev webpack webpack-cli
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install --save-dev expose-loader
npm install --save jquery
npm install --save-dev style-loader css-loader
npm install --save-dev sass sass-loader
- I think sass is the new one (dart sass)
npm install --save-dev mini-css-extract-plugin
npm install --save-dev css-minimizer-webpack-plugin

{ "name": "f3-multi-lang-site", "version": "1.0.0", "description": "A simple, multi-language site using Bootstrap & F3", "main": "index.php", "scripts": { "build": "webpack --mode=production", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Rich DeBourke", "license": "MIT", "devDependencies": { "@babel/core": "^7.18.6", "@babel/preset-env": "^7.18.6", "autoprefixer": "^9.8.4", "babel-loader": "^8.2.5", "exports-loader": "^4.0.0", "expose-loader": "^4.0.0", "webpack": "^5.73.0", "webpack-cli": "^4.10.0" }, "dependencies": { "bootstrap": "4.6.2", "jquery": "^3.6.0", "jquery.easing": "^1.4.1", "popper.js": "^1.16.1" }, "browserslist": [ "last 1 version", "> 1%", "ie >= 10" ] }

{ "name": "webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack" }, "author": "", "license": "MIT", "devDependencies": { "bootstrap": "^5.2.2", "css-loader": "^6.7.1", "sass": "^1.55.0", "sass-loader": "^13.1.0", "style-loader": "^3.3.1", "webpack": "^5.74.0", "webpack-cli": "^4.10.0" } }

{ "name": "code", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack --config webpack.config.js" }, "keywords": [], "author": "", "license": "MIT", "devDependencies": { "bootstrap": "^5.2.2", "css-loader": "^6.7.1", "sass": "^1.55.0", "sass-loader": "^13.1.0", "style-loader": "^3.3.1", "webpack": "^5.74.0", "webpack-cli": "^4.10.0" } }

const path = require('path'); module.exports = { devtool: "source-map", entry: './js/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'js') }, target: ['web', 'es5'], module: { rules: [{ test: /\.m?js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: "defaults" }] ] } } }] } };

const path = require("path"); const { ModuleFilenameHelpers } = require("webpack"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist") }, module: { rules: [ // { // test: /\.css$/, // use: ["style-loader", "css-loader"] // }, { test: /\.css$/, use: ["style-loader", "css-loader", "sass-loader"] } ] } };

const path = require("path"); module.exports = { mode: "development", devtool: false, entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\.scss$/, use: [ "style-loader", //3. Inject styles "css-loader", //2. css into commonjs "sass-loader" //1. sass into css ] } ] } };

Webpack

Note on running scripts

Installing stuff for Webpack

Site Construction

webpack-1

webpack-7

Site Construction

webpack-1

webpack-7

Site Construction

webpack-1

webpack-7