background

With the development of front-end engineering, the development of code has not only written HTML, CSS, JS these three sets of files can be. Due to the increasing complexity of front-end applications, the traditional writing method is no longer suitable for the current scenario. This makes development and maintenance more complex and iteration more expensive. In addition, the idea of modularization and componentization became more and more popular, resulting in the popularity of frameworks such as VUE and React. But no matter what hack you use, the browser only recognizes those three files. So the packaging tool naturally appeared, of course, there are many packaging tools, the author chooses webpack here, because many frameworks are combined with it for development. So here’s what you need to know about packing tools.

What is front-end engineering

With the development of technology, front-end development is no longer the era of the three musketeers (HTML, CSS, JS). Actually engineering is a very broad description. The use of Webpack is an example of front-end engineering. Overall, engineering is the use of a series of tools to improve the efficiency of development and the quality of the project. For example, today’s front-end development is componentized and modular, and WebPack’s packaging tools make development more efficient. Developers only need to focus on business development, after the engineering infrastructure is configured, the code compatibility, packaging, compression, and so on will come out automatically.

What is the webpack

Essentially, WebPack is a static Module bundler for modern JavaScript applications, according to the website. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles.

So Webpack is a module packer that packs and assembles development modules and outputs static files that browsers can recognize

Webpack basic configuration

  • entry

The entry starting point indicates which module WebPack should use as a starting point for building its internal dependency diagram. Once at the entry point, WebPack finds out which modules and libraries are (directly and indirectly) dependent on the entry point. Each dependency is then processed and finally exported to a file called bundles

  • output

The Output attribute tells WebPack where to export the bundles it creates and how to name these files, with the default being./dist. Basically, the entire application structure is compiled into a folder in the output path you specify. You can configure these processes by specifying an output field in the configuration.

  • loader

Loader enables Webpack to handle non-javascript files (WebPack itself only understands JavaScript). Loader can convert all types of files into valid modules that WebPack can handle, and then you can take advantage of WebPack’s packaging capabilities to process them.

In essence, WebPack Loader converts all types of files into modules that the application’s dependency diagram (and ultimately its bundle) can reference directly.

  • plugins

Loaders are used to transform certain types of modules, while plug-ins can be used to perform a wider range of tasks. Plug-ins range from packaging optimization and compression to redefining variables in the environment. Plug-in interfaces are extremely powerful and can be used to handle a wide variety of tasks.

  • Mode

By selecting either Development or Production to set the mode parameter, you can enable the optimization built into WebPack for that mode

Here is just a simple definition, specific details can go to see the official website, write more detailed, not to say more.

The webPack build process

In fact, WebPack is like a production pipeline that takes a lot of work to convert the source code into the corresponding output. Here’s a quick look at the build process.

  • Instantiate Compiler to compile objects
  • Initialize the entry, parse the entry file, and build the dependency tree
  • Determine the compilation environment
  • Initialize internal parsing
  • Decide how to start compiling
  • Start compiling the file
  • A Compilation is created for each module, which compiles modules that depend on the tree and can be loaded, optimized, and recreated during Compilation
  • Compile the end
  • The output file
  • Compile the complete

What is the loader

In Webpack, the compiler is the Loader, which can be simply understood as the translation officer. Use loader to translate content that WebPack does not understand into content that WebPack can understand. For example, es6 code written at ordinary times is compiled by babel-Loader, while SCSS and LESS are translated by their respective loaders. Loader is a function that operates on the content that needs to be translated. The simplest loader is as follows:

module.exports = function (code) {
    return code
}
Copy the code

The loader does nothing but return the content as is.

How to use loader

When a loader is needed, the first step is to install it, for example

npm i babel-loader -D
Copy the code

Then use the loader in the configuration file

{
  test:/.js$/,
  use: {
    loader:'babel-loader'
  }
}
Copy the code

What is a plug-in

The so-called plug-in is actually an extension and supplement to the WebPack packaging process, so that WebPack has more possibilities. Allows webPack to do extra things during packaging that loader cannot do. For example, if you want to compress code in a package, you need to compress the plug-in. You need to output HTML and you need HTML plug-ins and so on.

How to use plug-ins

In fact, using a plug-in is similar to using a Loader. It is also necessary to install the plug-in before deciding which plug-in to use. Examples are as follows:

npm i html-webpack-plugin -D
Copy the code

The plug-in is then used in the configuration file as well

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path');
​
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
​
module.exports = config;
Copy the code

summary

Because the level is limited, the first simple write down the basic use, later look at the point of individual interest in writing some articles, mainly to consolidate learning knowledge points, feel helpful welcome to praise, there are mistakes please advise.