Getting Started

2a:null 2b:["$","title",null,{"children":"Introduction to Webpack | Steve Oney | Observable"}] 30:T727,md`## Why do we need Webpack? There are two ways to run JavaScript in a browser. First, include a script for each functionality; this solution is hard to scale because loading too many scripts can cause a network bottleneck. The second option is to use a big .js file containing all your project code, but this leads to problems in scope, size, readability, and maintainability. In our examples so far, we have a single script file that contains less than 50 lines of code. There is no problem including everything in a single script file. However, when we start adding more functionality to the webpage, the size of the script file grows. We need to split the code into different parts and break the single script file into smaller files. It also benefits the collaboration between multiple people so that we don't have to work on the same file simultaneously. However, we would need to include multiple \`\` tags in our page, while carefully choose the order of the \`\` tags as we want to ensure that the utility function is available before using it. Basically, Webpack helps us do the job by safely concatenating files. There are mechanisms for specifying dependencies and imports in ES6 and nodeJS. Webpack uses these mechanisms to build a dependency graph of all the files and their dependencies, and bundle all the files. More than that, every time we make changes to a file, Webpack would optimize the amount of effort needed to update the final output. We don't have to rebuild the whole thing after changing one file. With its vast configurable options and plugins, Webpack can help users perform even much more complex tasks. References: - [Webpack — why and what](https://medium.com/js-imaginea/webpack-why-and-what-4948433cc2d3) - [Why webpack](https://webpack.js.org/concepts/why-webpack/) `31:T836,md`### ESM: ES2015 Modules The static [\`import\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) statement is used to import read only live bindings which are exported by another module: \`Import\` syntax: \`\`\`\`javascript import defaultExport from "module-name"; import * as name from "module-name"; import { export1 } from "module-name"; import { export1 as alias1 } from "module-name"; import { export1 , export2 } from "module-name"; import { foo , bar } from "module-name/path/to/specific/un-exported/file"; import { export1 , export2 as alias2 , [...] } from "module-name"; import defaultExport, { export1 [ , [...] ] } from "module-name"; import defaultExport, * as name from "module-name"; import "module-name"; var promise = import("module-name"); \`\`\`\` The [\`export\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) statement is used when creating JavaScript modules to export live bindings to functions, objects, or primitive values from the module so they can be used by other programs with the import statement. \`Export\` syntax: \`\`\`\`javascript // Exporting individual features export let name1, name2, …, nameN; // also var, const export let name1 = …, name2 = …, …, nameN; // also var, const export function functionName(){...} export class ClassName {...} // Export list export { name1, name2, …, nameN }; // Renaming exports export { variable1 as name1, variable2 as name2, …, nameN }; // Exporting destructured assignments with renaming export const { name1, name2: bar } = o; // Default exports export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … }; // Aggregating modules export * from …; // does not set the default export export * as name1 from …; // Draft ECMAScript® 2O21 export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …; export { default } from …; \`\`\`\` `32:T4eb,md`### CJS: CommonJS Modules CommonJS is the module system that initially inspired NodeJS. **Commonjs isn't natively understood by browsers**; it requires either a loader library or some transpiling. By default, each \`.js\` file is a CommonJS module. A module variable and an exports variable are provided for a module (a file) to expose APIs. And a require function is provided to load and consume a module. The following code defines the counter module in CommonJS syntax: \`\`\`\`javascript // Define CommonJS module: commonJSCounterModule.js. const dependencyModule1 = require("./dependencyModule1"); const dependencyModule2 = require("./dependencyModule2"); let count = 0; const increase = () => ++count; const reset = () => { count = 0; console.log("Count is reset."); }; exports.increase = increase; exports.reset = reset; // Or equivalently: module.exports = { increase, reset }; \`\`\`\` The following example consumes the counter module: \`\`\`\`javascript // Use CommonJS module. const { increase, reset } = require("./commonJSCounterModule"); increase(); reset(); // Or equivelently: const commonJSCounterModule = require("./commonJSCounterModule"); commonJSCounterModule.increase(); commonJSCounterModule.reset(); \`\`\`\` `33:[] 2e:{"id":"0fe07dd74e07b31e","slug":"introduction-to-webpack","title":"Introduction to Webpack","thumbnail":"e329367ab3f0ff9c59ffe46eec5dee600af092a173db44c400c6b1507e5fefcc","access_level":"public","create_time":"$D2020-12-30T20:27:27.811Z","update_time":"$D2023-10-02T17:43:42.890Z","view_time":null,"first_public_time":"$D2020-12-30T20:27:28.813Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":38,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Introduction to Webpack","cells":[{"id":0,"value":"md`# Introduction to Webpack\n\nWebpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"html`

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"html`

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`## Install Webpack\n\n- First, make sure that you have the latest [Node.js](https://nodejs.org/en/) installed.\n- Next, install webpack locally using npm: \\`npm install --save-dev webpack\\`\n- You will also need to install webpack-cli (the tool used to run webpack on the command line): \\`npm install --save-dev webpack-cli \\`\n- Check if webpack is properly installed: \\`webpack --version\\`\n\nReferences:\n- [Webpack Installation Guides](https://webpack.js.org/guides/installation/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"md`## A Hello World Example for Webpack`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"md`\nThis example is adapted from [Webpack Getting Started.](https://webpack.js.org/guides/getting-started/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`\nLet's first create a project with npm. The directory structure looks like this:\n\n\\`\\`\\`\\`\nwebpack-demo\n |- package.json\n |- index.html\n |- /src\n |- index.js\n\\`\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"md`### Setup without Webpack`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`\nIn the \\`index.html\\` file, we include the lodash library and the \\`index.js\\` script.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`\n\\`\\`\\`\\`HTML\n\n\n \n \n Getting Started\n \n \n \n \n \n\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"md`In the \\`index.js\\` file, we create a new div using the lodash \\`.join\\` method.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"md`\n\\`\\`\\`\\`\nfunction component() {\n const element = document.createElement('div');\n\n // Lodash, currently included via a script, is required for this line to work\n element.innerHTML = _.join(['Hello', 'webpack'], ' ');\n\n return element;\n}\n\ndocument.body.appendChild(component());\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`\nIn this example, there are implicit dependencies between the \\`\n \n \n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`### Create Webpack Configurations\nWebpack supports a configuration file for more complex setup. Let's create one for the previous hello world example.\n\nFirst, let's create a \\`webpack.config.js\\` under the project root folder.\n\n\\`\\`\\`\\`\nwebpack-demo\n |- package.json\n |- webpack.config.js\n |- /dist\n |- index.html\n |- /src\n |- index.js\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`We can use the following configurations. It means that we will take \\`./src/index.js\\` as an entry point, and produce the output file named \\`main.js\\` under \\`./dist\\`.\n\\`\\`\\`\\`javascript\nconst path = require('path');\n\nmodule.exports = {\n entry: './src/index.js',\n output: {\n filename: 'main.js',\n path: path.resolve(__dirname, 'dist'),\n },\n};\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`\nLet's run the webpack command with the new configuration file.\n\\`\\`\\`\\`\n$ npx webpack --config webpack.config.js \n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`## JavaScript Modules Format\n\nIn the example we showed with webpack, we load the lodash module by using the \\`import\\` keyword.\n\nJavaScript language was initially invented for simple form manipulation, with no built-in features like module or namespace. In years, tons of technologies are invented to modularize JavaScript. \n\nIn this section, we will take a look at different JavaScript module format. We will begin by the ESM used in the webpack example.\n\nReference:\n- [Understanding (all) JavaScript module formats and tools](https://weblogs.asp.net/dixin/understanding-all-javascript-module-formats-and-tools#es-module-ecmascript-2015-or-es6-module)\n- [Understand the different javascript modules formats](https://code-trotter.com/web/understand-the-different-javascript-modules-formats/)\n- [Webpack: Module Methods](https://webpack.js.org/api/module-methods/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`### AMD: Asynchronous Module Definition\nAMD is a variation from CommonJS that is built for supporting asynchronous module loading. AMD works in browsers. AMD provides a \\`define\\` function to define module, which accepts the module name, dependent modules’ names, and a factory function:\n\n\\`\\`\\`\\`javascript\n// Define AMD module.\ndefine(\"amdCounterModule\", [\"dependencyModule1\", \"dependencyModule2\"], (dependencyModule1, dependencyModule2) => {\n let count = 0;\n const increase = () => ++count;\n const reset = () => {\n count = 0;\n console.log(\"Count is reset.\");\n };\n\n return {\n increase,\n reset\n };\n});\n\\`\\`\\`\\`\n\nIt also provides a \\`require\\` function to consume module:\n\n\\`\\`\\`\\`javascript\n// Use AMD module.\nrequire([\"amdCounterModule\"], amdCounterModule => {\n amdCounterModule.increase();\n amdCounterModule.reset();\n});\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"