Webpack Frequently Asked Questions

Conceptual question one: what is the difference between Webpack and grunt and gulp?

Answer: Webpack is a Module packager that can recursively package all the modules in a project and eventually generate several packaged files. The biggest difference between him and the other tools is that he supports code-splitting, modularity (AMD,ESM,COMMONJS), and global analysis.

Concept question two: What is bundle, what is chunk, what is module?

The answer: bundle is a file that is packaged by Webpack, chunk refers to the code block that the code splits out when the Webpack analyzes the dependency of the module. Module is a single module in development.

Conceptual question three: What is loader? What is plugin?

Answer:
1) loaders is used to tell webpack how to convert and process a file of a certain type and introduce it into the packaged file
2) plugin is used to customize the Webpack packaging process, a plug-in is an object containing the Apply method, through this method can participate in the entire Webpack packaging process (life cycle).

Configuration question: How can I automatically generate a webpack configuration?

Answer: Webpack-cli/vue-cli/etc ... Scaffolding Tools

Development question one: what is the difference between Webpack-dev-server and HTTP server like Nginx?

Answer: Webpack-dev-server uses memory to store packaged files in the Webpack development environment, and can use the module hot update, which is simpler and more efficient than traditional HTTP services.

Development Issue Two: What is a module hot update?

Answer: The module hot update is a function of webpack, he can make the code after the change without refreshing the browser can be updated, is the advanced version of the automatic refresh browser.

Optimization question one: What is a long cache? How do I optimize for long cache in Webpack?

Answer: The browser in the user access to the page, in order to speed up the load, the user access to the static resources to store, but every time the code upgrade or update, the browser to download new code, the most convenient and simple Update method is to introduce a new file name. In Webpack, you can specify Chunkhash in the output file, and separate frequently updated code and framework code. Package the file name again with Namemodulesplugin or Hashedmoduleidsplugin.

Optimization question two: What is tree-shaking? Can CSS be tree-shaking?

Answer: Tree-shaking is the removal of those dead code that was introduced, but not used in the code, in packaging. In Webpack, Tree-shaking is tree-shaking through Uglifysplugin.
Js. CSS requires the use of purify-css.

may you become a lifelong learner

.

Webpack Frequently Asked Questions