[Front-end vue interview] webpack

split configuration

Generally, the configuration is divided into 3 files;

• webpack.common.js is used for public configuration;
• webpack.dev.js is used for configuration of development environment;
• webpack.prod.js is used for production environment configuration.

Introducing webpack-merge, the development environment and production environment must merge with common configurations

Cross-domain proxy

How to request other interfaces across domains under webpack?

Interview frequently asked questions
For example, if the front-end port is 8080 and the server port is 3000, then if the front-end directly requests 3000 during the request, the cross-domain request will not be available. In this case, a proxy can be used.

Handling ES6 (babel-loader)

Need to configure.bebelrc

Handle style

postcss-loader, which handles CSS browser compatibility
less-loader
css-loader
style-loader

When using postcss-loader, you need to configure postcss.config.js

Processing images (file-loader)

In development environment

In production environment

multiple entrances

Configure multiple entries in the public configuration entry

Extract css files

After extracting the css file, the css style is introduced in the form of an external link file

When the css is not extracted, the css will be placed<style> Medium

线上打包，必须抽离CSS文件

Separate public code and third-party code

Two files introduce the same module and will be packaged twice

Third-party module

The lodash file is large
Every time the business code is modified, lodash must be repackaged, but lodash has not changed and does not need to be repackaged at all
Lodash should be separated and packaged separately. When the business code changes, loadsh will hit the cache and load faster

chunks & cache subletting

You can set minSize to limit how large a third-party module can be packaged separately
If the file is very small, you can package it directly with the business code without extracting it

minChunks: 2 // The public module has been reused at least a few times
For example, if the public module has been reused at least 2 times, it should be extracted and packaged separately, such as math

Lazy loading

Lazy loading will also generate a chunk

Handling JSX

@babel/preset-react

Handle vue

vue-loader

The difference between module chunk bundles

1. module-each source code file, everything in webpack is a module
   (files that can be imported are modules, no matter what type they are, such as css js images)
2. chunk-Multiple modules are merged, such as entry, import(), splitChunk can generate chunks
3. bundle - the final output file
   

Optimize build speed

Optimize babel-loader

Enable caching: Use cacheDirectory. As long as the ES6 code has not changed, it will not be recompiled and will be cached.
When compiling for the second time, the cache will be used for the unchanged parts

WomanPlugin

1. Use IngorePlugin to ignore useless files
   For example: moment will support multiple languages, how to introduce only Chinese modules?
   // Ignore the /locale directory under moment
   new webpack.IgnorePlugin(/./locale/, /moment/)

// Dynamically introduce language packs into business code
import ‘moment/locale/zh-cn’

2. noParse evacuation package
   module: { noParse: [/react.min.js$/] }
   
   

Difference: IgnorePlugin is not introduced directly and is not included in the code
noParse (similar to vue.min.js that has been modularized) is introduced but not packaged

happypack

1.js single thread, enable multi-process packaging
2. Improve construction progress

// Step 1 Under module.rules-hand the .js file to the HappyPack instance with the ID label
{ test: /.js$/, use: ['happypack/loader?id=babel'] }< /span>

// Step 2 happyPack enables multi-process packaging
new HappyPack({ id: ‘babel’, loaders: [‘babel-loader?cacheDirectory’] })

ParallelUglify multi-process compression JS

1. webpack's built-in Uglify tool compresses JS
2. JS single-threaded, enable multi-process compression faster
3. Same as happyPack
   Use compression in development environment
   
4. The project is larger and the packaging is slower. Turning on multiple processes can improve the speed.
5. The project is small and packaged quickly. Enabling multiple processes will reduce the speed (process overhead)
6. Use as needed

Hot update

1. Automatic refresh: The entire web page is refreshed, the speed is slow
2. Automatic refresh: status will be lost (data in the form will be lost)
3. Hot update: the new code takes effect, the web page does not refresh, and the status is not lost

Hot update configuration

Configure which modules need hot update yourself

Applicable environment

webpack optimizes build speed
（可用于生产环境）

1. Optimize babel-loader
   The cache is used in the development environment and is basically not used in the production environment
   Use include exclude to clarify the scope
2. IgnorePlugin
   Avoid the introduction of some modules
   If not used, it may cause some problems. The packaged volume will be larger and the packaging will be slower
3. noParse
   Avoid packaging some things and increase the speed of packaging in the production environment
4. happyPack
5. ParallelUglifyPlugin (must be used in production environment, compressed code)
   webpack optimizes build speed
   （不可用于生产环境！）
6. Auto Refresh
7. Hot update
8. DllPlugin