What are the common loaders?

  • File-loader: Outputs files to a folder, referencing the output file with a relative URL in the code
  • Url-loader: similar to file-loader, but can inject the contents of files into code base64 if the files are too small
  • Source-map-loader: Loads additional source map files to facilitate breakpoint debugging
  • Image-loader: loads and compresses image files
  • Babel-loader: Convert ES6 to ES5
  • Css-loader: loads the CSS and supports features such as modularization, compression, and file import
  • Style-loader: Inserts CSS code into JavaScript and loads CSS via DOM manipulation.
  • Eslint-loader: Checks JavaScript code through ESLint

What are the common plugins?

  • Define-plugin: Defines environment variables
  • Commons-chunk-plugin: Extract common code
  • Uglifyjs-webpack-plugin: Compress ES6 code with UglifyES

What is the difference between a loader and a plugin?

Different functions:
  • Loader is a Loader. Webpack treats all files as modules, but Webpack natively only parses JS files, and if you want to package other files, you use loader. So what Loader does is give WebPack the ability to load and parse non-javascript files.
  • A Plugin is a Plugin. Plugin can extend the functionality of WebPack to make it more flexible. A number of events are broadcast during the life cycle of a Webpack run, and the Plugin can listen for these events and change the output when appropriate through the API provided by Webpack
Different usage:
  • Loader is configured in module.rules, which means that it exists as a parsing rule for modules. The type is array, each item is an Object, which describes the type of file (test), what to use (loader), and the parameters (options) to use.
  • Plugins are configured separately in plugins. Each item is an instance of plugin, and the parameters are passed in through the constructor.

How do I load code on demand?

Libraries of off-the-shelf UI components such as ElementUI, iView, and so on are often brought in to quickly develop front-end projects, but their size, as well as the functionality they provide, are enormous. Normally, we only need a few components, but we pack a huge library of components into our source code, causing unnecessary overhead.

However, many component libraries already provide ready-made solutions, such as Element’s babel-plugin-Component and AntDesign’s babel-plugin-import. Set this parameter in the. Babelrc configuration or in the babel-loader parameter to load components on demand.

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
Copy the code

How can build speed be improved?

  • In multi-entry cases, the CommonsChunkPlugin is used to extract common code
  • Use the externals configuration to extract common libraries
  • The precompiled resource module uses the DllPlugin to precompile NPM packages that we reference but never modify, and then loads the precompiled modules in via the DllReferencePlugin.
  • Use Happypack to achieve multi-threaded accelerated compilation
  • Use Webpack-Uglify-Parallel to increase the compression speed of uglifyPlugin. In principle, Webpack-Ugli-fi – Parallel uses multi-core parallel compression to improve compression speed
  • Use tree-shaking and Scope compensation to weed out redundant code

Here’s the source