webpack concept

Essentially, WebPACK  is a modern JavaScript applications static packer module (Module Bundler) . When webpack processing applications, it recursively construct a dependency graph (dependency Graph) , wherein each module comprises application desired, all of these modules are then packaged into one or more of  the bundle .

From here to learn more about JavaScript module and webpack module.

Starting webpack v4.0.0, you can not introduce a configuration file. However, webpack it is still highly configurable . Before you start you need to understand the four core concepts:

• Entrance (entry)
• Output (output)
• loader
• Plugin (plugins)

This document is intended to give high-level overview of these concepts while providing detailed specific concepts related use cases.

Entrance (entry)

Inlet starting point (entry point) webpack indicates which module should be used to build as the internal dependency graph begins. After the entrance to the starting point, webpack will find out which modules and libraries are the starting point of entry (direct and indirect) dependent.

Each dependency is processed immediately, the final output to call  bundles  file, we will discuss this process in detail in the next section.

It can be obtained by  webpack configuration configuration  entry attribute, an entry to specify the starting point (starting point or more inlets). The default value  ./src.

Next we look at a  entry simple example configuration:

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js' }; 

According to the specific requirements of the application, can be configured in various ways  entry  properties. From the entrance starting point of the section to learn more.

Exit (output)

output attribute tells webpack output where it creates  bundles , and how to name the files, the default value  ./dist. Basically, the entire application structure, will be compiled into a file you specify the output path folder. You can specify a configuration in the  output field, to configure these processes:

webpack.config.js

const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' } }; 

In the above example, we are through  output.filename and  output.path property, to tell the name of webpack bundle, and we want to bundle generate (emit) where. Maybe you want to know what the code in the top import path module is that it is a  Node.js core module , for operating the file path.

You may find that term is generated (emitted or emit) throughout our entire documentation and plugins API . It is the "production (Produced)" or "release (Discharged)" special terminology.

output  Properties also more configurable features , if you want to learn more about  output  the concept of property, you can read the concept chapter to learn more.

loader

loader  make webpack able to deal with those non-JavaScript files (webpack itself only understand JavaScript). loader can convert all types of files that can be handled effectively webpack module , then you can use packaged ability webpack, and to process them.

Essentially, webpack loader all types of files, is converted to the module dependency diagram of the application (and eventually the bundle) can be directly referenced.

Note, loader can  import  import any type of module (such as  .css  a file), which is webpack specific features, other possible packaged program or task execution is not supported. We believe that this language extension is necessary because it allows developers to create more accurate dependency graph.

At a higher level, in webpack configuration loader has two objectives:

1. test Attribute for identifying the corresponding loader should be performed or a certain file conversion.
2. use When the attribute of the conversion, which should loader use.

webpack.config.js

const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } }; module.exports = config; 

In the above configuration, a single module to define the object  rules attribute, which contains two attributes must be: test and  use. This tells webpack compiler (compiler) the following information:

"Hey, webpack compiler, when you meet 'in  require()/ import when the statement is interpreted as a' .txt 'path', before you pack it, first use the  raw-loader conversion look. "

It is important to remember when, defined in the configuration loader in webpack, to be defined in  module.rules  instead  rules . However, when defining error webpack will give a serious warning. In order to make you benefit from this, if not done in the correct way, webpack will "give a serious warning."

loader and more specific configuration attributes we have not yet mentioned.

understand more!

Plugin (plugins)

The loader is used to convert certain types of blocks, which plug can be used to perform a wider range of tasks. Range of plug-ins include, from packaging optimization and compression, all the way to redefine the environment variable. Plug-in interface is extremely powerful, can be used to handle a variety of tasks.

Wants to use a plug-in, you only need  require() it, then add it to the  plugins array. Most plug-ins can be customized by option (option). You can also use multiple times because of the different purposes with a plug in a configuration file, then need to use  new to create an instance of operator.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 用于访问内置插件 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config; 

webpack offers many plugins available out of the box! Check out our list of plugins for more information.

The use of plug-in webpack configuration is straightforward, but there are a lot we can further explore use cases.

understand more!

mode

By selecting  development or  production a being, and to set the  mode parameters, you can enable webpack built under the corresponding pattern optimization

module.exports = {
  mode: 'production' }; 

understand more!