The way to advance Webpack

preface

This article records the path of webpack5 learning

Webpack base paper

1. What is Webpack

Essentially, WebPack is a static packaging tool for modern JavaScript applications. As WebPack processes an application, it recursively forms a dependency graph containing each module required by the application, and then packages these modules into one or more bundles.

To put it simply: WebPack is a static resource packaging tool that bundles the modules that depend on in a project into one or more bundles

2. Advantages of Webpack

  • Have dependency management, dynamic packaging, code separation, load on demand, code compression, static resource compression, caching, and more
  • Webpack has strong expansibility and perfect plug-in mechanism. Developers can customize plug-ins (plugin) and loader
  • Webpack has a large community, fast updates, and rich wheels

3. Basic applications

3.1 Entry (Entry File)

Entry is the start of a dependency diagram, from which to find dependencies, package builds, and WebPack allows one or more entry configurations:

Single entry configuration

module.exports = {
    entry:"indexjs"
}
Copy the code

Multiple entry configuration

module.exports = {
    entry: {index: path.join(srcPath,"index.js"),
        other:path.join(scrPath,"other.js")}}Copy the code

Entry Refer to the WebPack documentation for more configuration details

3.2. Output (Export documents)

The output is used to configure the exit of the WebPack build package, such as the package location, the file name of the package:

Single entry starting point

For a single entry starting point, filename is a static name

module.exports = {
    output: {path: path.resolve(__dirname,"dist"),
        filename:"bundle.js",}}Copy the code

Multiple entry points

For multiple entry points, code splitting, or plugins that create multiple bundles, substitution should be used to give each bundle a unique name

Use entry names
module.exports = {
    output: {filename:"[name].bundle.js"}}Copy the code
Use the internal chunk ID
module.exports = {
     output: {filename:"[hash].bundle.js"}}Copy the code
Using chunkhash
module.exports = {
    output: {filename:"[name].[chunkhash].bundle.js"}}Copy the code
Using contenthash
module.exports = {output: {filename:"[name].[contenthash:8],bundle.js"}}Copy the code

TODO Webpack the difference between the three hash types. Webpack caches related outputs for more configuration details refer to the Webpack documentation

3.3 loader (Compiler and conversion)

Webpack has the ability to package and build JavaScript and JSON files without extra configuration. For other types of files, such as CSS files, you need to install loader. Loader enables WebPack to process other types of files and convert them into valid modules for use by applications and to be added to dependency diagrams

module.exports = {
    module: {rules:[
            {
                test:/\.css$/i,
                use:["style-loader"."css-loader"}]}}Copy the code

The commonly used loader

  • style-loader
  • css-loader
  • Less – loader, sass – loader
  • thread-loader

Refer to the WebPack documentation for more configuration details on module

For details about loader configuration, see the Loader document

3.4 Plugin (plug-in)

Plug-ins are used to extend webPack’s capabilities

module.exports = {
    plugin: [new HtmlWebpackPlugin({
        template:'./src/index.html'}})]Copy the code

See the plugin documentation for specific plugin configurations

Plugin for more configuration details refer to the WebPack documentation

3.5. Mode mode

Webpack offers a selection of modes, including development mode, production mode, and empty mode, with built-in optimizations for each mode. You can make projects better by configuring patterns. The configuration is as follows:

module.exprots = {
    mode:'development'
}
Copy the code

3.6. Resolve (resolve)

Resolve is used to configure module resolution. The common configurations are as follows:

  • Alias: Configure an alias to simplify module import
  • Extensions: Introduce modules without a suffix
  • Symlinks: Used for configurationnpm linkWhether this parameter takes effect. Disabling this parameter improves compilation speed
module.exports = {
    resolve: {extensions: ['.js'.'.jsx'.'.ts'.'.json'.'.d.ts'].alias: {The '@':"./src"
         },
         symlinks:false}}Copy the code

Resolve Refer to the WebPack documentation for more configuration details

3.7. Optimization

Optimization is used to customize the built-in optimization configuration of Webpack. It is generally used in mode: Production to improve performance. The configuration items are as follows:

  • Minimize: Compress budle or not
  • Minimizer: Whether to configure compression tools such as TerserPlugin, OptimizeCssAssetsPlugin
  • SplitChunk: splits the bundle
  • RuntimeChunk: Whether to split all the runtime files that generated the shared traffic between chunks
module.exports = {
    optimization: {minimizer: [new CssMinimizerPlugin()
         ],
         splitChunks: {chunks:'all'.// Repeat packaging problemCacheGroup: {vendors: {//node_modules
                     test:/[\\/]node_modules[\\/]/,
                     chunks:"all".name:"vendors".//chunks name
                     priority:10./ / priority
                     enforce:true
                 }
            }
         }
     }
 }
Copy the code

Webpack advanced

To be continued ~~~~~~~~~~~~~~~~~~~~~~~~··