{"id":13613035,"url":"https://github.com/styopdev/webpack-interview-questions","last_synced_at":"2025-06-28T15:37:36.158Z","repository":{"id":41514137,"uuid":"92639750","full_name":"styopdev/webpack-interview-questions","owner":"styopdev","description":"Webpack questions/answers you can use to prepare for interviews or test your knowledge.","archived":false,"fork":false,"pushed_at":"2018-02-03T20:23:16.000Z","size":40,"stargazers_count":230,"open_issues_count":0,"forks_count":60,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-28T06:36:05.163Z","etag":null,"topics":["build-tool","webpack","webpack-questions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/styopdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-28T04:26:27.000Z","updated_at":"2025-03-29T19:13:38.000Z","dependencies_parsed_at":"2022-09-21T11:32:14.432Z","dependency_job_id":null,"html_url":"https://github.com/styopdev/webpack-interview-questions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/styopdev/webpack-interview-questions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styopdev%2Fwebpack-interview-questions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styopdev%2Fwebpack-interview-questions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styopdev%2Fwebpack-interview-questions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styopdev%2Fwebpack-interview-questions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styopdev","download_url":"https://codeload.github.com/styopdev/webpack-interview-questions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styopdev%2Fwebpack-interview-questions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262455041,"owners_count":23313977,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build-tool","webpack","webpack-questions"],"created_at":"2024-08-01T20:00:38.292Z","updated_at":"2025-06-28T15:37:36.131Z","avatar_url":"https://github.com/styopdev.png","language":"JavaScript","readme":"# Webpack interview questions\n\n[View version with answers](https://github.com/styopdev/webpack-interview-questions/blob/master/answers.md)\n\nBig thanks to [TheLarkInn](https://github.com/TheLarkInn), [raybooysen](https://github.com/raybooysen) and [johannesMatevosyan](https://github.com/johannesMatevosyan) for contribution.\n\n## Table of Contents\n\n* [Concepts](#concepts)\n* [Config file](#config-file)\n* [Loaders](#loaders)\n* [Plugins](#plugins)\n* [Development](#development)\n* [Optimization](#optimization)\n* [Migration](#migration)\n* [Advanced questions](#advanced-questions)\n* [Internal API Questions (very advanced)](#internal-api-questions-very-advanced)\n\n### Concepts\n* What is webpack?\n* What is the main difference between webpack and other build tools like gulp or grunt?\n* What is a bundle in webpack?\n* In which environment does webpack work?\n* What is an `entry` point?\n* What is a dependency graph and how does webpack build it?\n* Which modules design patterns webpack supports out of the box?\n\n### Config file\n* What is the format of webpack's config file?\n* Is it possible to have multiple entry points in a single webpack configuration file?\n* Is it possible to define multiple configurations for different environments?\n* How can we generate webpack config file automatically?\n\n### Loaders \n* What is a loader in webpack?\n* Where should loaders be defined?\n* What is the difference between a rule and a loader?\n* Explain this code\n    ```javascript\n    {\n      test: /\\.scss$/,\n      loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap', 'postcss-loader'],\n      exclude: /node_modules/\n    }\n    ```\n* Do loaders work in a synchronous or an asynchronous way?\n* Is it possible to use multiple loaders in the `rules` single object?\n* Name loaders that you think are very important and helpful.\n\n \n### Plugins \n* Describe a plugin in webpack.\n* What is the difference between a loader and a plugin?\n* What is the advantage of CompressionPlugin?\n* How can you move some data (e.g css code) from a bundle to a separate file in webpack?\n* Name some plugins you think are important and helpful.\n* Is it possible to write your own plugin?\n\n### Development\n* What are some advantages of using webpack-dev-server over simple `http` server or nginx?\n* On which platform is webpack-dev-server developed?\n* What is Hot-Modules-Replacement?\n* Does it make sense to use Hot-Modules-Replacement in production environment?\n* How to enable source maps in webpack bundles?\n* How to automatically build and update bundles in the browser after a change in source code?\n* What is `parallel-webpack` and how does it affect webpack's build process?\n\n\n### Optimization\n* Briefly describe long-term caching and how to achieve it using webpack?\n* What is difference between\n\n    ```javascript\n       ...\n       output: {\n        filename: \"[name].[hash].js\"\n       }\n       ...\n   ```\n    and\n   ```javascript\n      ...\n       output: {\n        filename: \"[name].[chunkhash].js\"\n       }\n       ...\n    ```\n* Describe the CommonsChunkPlugin.\n* Explain this code\n ```javascript\n    new webpack.optimize.CommonsChunkPlugin({\n      name: 'common',\n      filename: 'common.js',\n      chunks: ['home', 'dashboard']\n    })\n  ```\n* Which built-in plugin should be used for code minification?\n* Explain this code\n ```javascript\n    new webpack.ContextReplacementPlugin(\n      /moment[\\/\\\\]locale/,\n      /(en-gb|en-us)\\.js/\n    )\n  ```\n* How to remove unused selectors from css using webpack?\n* How to achieve lazy loading in webpack?\n* Why is OccurenceOrderPlugin part of webpack optimization? What it has to do with module ids and topological sorting?\n* What analysis tools do you use for webpack bundle's inspection?\n\n\n### Migration\n* Describe the LoaderOptionsPlugin.\n* Do you need to include OccurenceOrderPlugin in the plugins section when use webpack 2/3?\n* Which version(s) of webpack support es6 modules out the box?\n* Which version(s) of webpack support json-loader out the box?\n* Which version(s) of webpack support code splitting?\n\n\n### Advanced questions\n* Describe the webpack runtime and manifest.\n* Is it possible to use other languages (except javascript) for the webpack config file?\n* Is it possible to have different configuration files for different environments?\n* Describe the tree shaking mechanism.\n* What is the difference between tree shaking and dead code elimination.\n* Describe scope hoisting in webpack 3.\n* What is Tapable and how does it relate to webpack plugins?\n\n### Internal API Questions (very advanced)\n* What is the difference between Compiler and Watching classes?\n* Describe the purpose of Compiler\n* Describe the purpose of Compililation\n* Describe DependenciesBlock class. Why is it so important?\n* Describe the relationship between the Parser, Dependency, Dependency Factory, and Dependency Templates\n","funding_links":[],"categories":["Programming Languages/Frameworks/Platforms","JavaScript",":mortar_board: 进阶"],"sub_categories":["Front-end build tools",":closed_book: 面试"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyopdev%2Fwebpack-interview-questions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyopdev%2Fwebpack-interview-questions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyopdev%2Fwebpack-interview-questions/lists"}