Basic configuration of webpack

Time:2020-3-9

Preface

Although I’ve been in touchwebpack, but they all look at documents when they encounter problems in project development, and do not systematically learn and digest them. This article will learn fromwebapckThe basic configuration starts until a simple project is successfully packaged. Share it with the friends who need to get started, and also leave a note

Be based onwebpack 4.x

If there are any mistakes or mistakes in the article, please refer to my friends and thank them in advance

OK, I don’t need to talk much. Here’s how

concept

For rigid contactwebapckThe first thing you may want to know isWhat is webpack and what it can do

On this issue,webpackThe answer from our website:

In essence,webpackIt’s a modernJavaScriptStatic module packaging tool for applications. WhenwebpackWhen processing an application, it builds a dependency graph internally(dependency graph), this dependency map maps each module required by the project and generates one or morebundle

As forwebpackCompared with traditional packaging tools, such asgulpWhat’s the difference between them? I won’t go into details here. Interested partners can have a look here

core

webpackThere are four core

  • Entry entrance
  • Output output
  • loader
  • Plugin plug in

entry

InstructionswebpackWhich module should be used as the start of building its internal dependency graph. After entering the starting point of the entrance,webpackIt will find out which modules and libraries are dependent on the entry starting point (direct and indirect). The default value is./src/index.js

output

tellwebpackWhere to export what it createsbundle, and how to name these files. The default value for the primary output file is./dist/main.js, other build files are placed in the./distFolder

loader

webpackCan only understandJavaScriptandJSONPapers.loaderGive WaywebpackThe ability to process other types of files and convert them into valid modules for use by applications and to be added to dependency graphs

plugin

loaderUsed to transform certain types of modules, while plug-ins can be used to perform a wider range of tasks. Including: Packaging Optimization, resource management, injection of environment variables

Just remember these concepts and know what each attribute does. Now, let’s do something practical

Preparation

Well, since we’re going to usewebpackTo package a project, first we need to create a project, such as usingjQueryMake a case of interlaced discoloration. The basic structure of the project can be as follows:

│ index.html // HTML page
│ package.json // package.json file
│
└─ src
    │ main.js // JS file

Very simple structure has wood, next we download what we need

  • webapck
  • webpack-cli
  • jquery

fromv4.0.0At first,webpackYou don’t need to import a configuration file to package the project, which depends onwebpack-cli。 However, it is still highly configurable

Command line mode

First of all, we can now directly use the command line mode to package the project

Syntax:

Webpack entry-o exit

That’s what it looks like

Basic configuration of webpack

For more command line operations, please see here

In general, there are many places to configure in our project, so there will be a configuration file for special settingswebapck

configuration file

First of all, this is what our file directory looks like

│ index.html // HTML page
│ package.json // package.json file
│ webpack.config.js // webpack configuration related
│
└─ src
    │ main.js // JS file

Therewebpack.config.jsIs the file we need to configure

We need to download one firstwebpack-dev-serverIt can quickly develop applications, in which we can start local services, set basic page, port number, open browser, enable hot update and other functions

Now, let’s see how to make these configurations

Basic configuration of webpack

Basic configuration of webpack

With these configurations enabled, we can easily build our project.

In view of the notes in the above figure, here are some more

  • pathyesnodeA module in that represents path related operations
  • Hot update can be enabled indevServerAnd then introduce the hot update plug-in. Or, directly atpackage.jsonDocumentscriptAdd towebpack-dev-server --hot
  • analysiscssperhapssassOfloaderSequence: right to left
  • url-loaderandfile-loaderBut when the file size (in bytes) is lower than the specified limit, you can return aDataURL, can be set like this
{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          Limit: 8192 // less than 8KB will be converted to Base64 format. The above returns a dataurl
        }
      }
    ]
}

Epilogue

That’s aboutwebpackClick here to view the complete demo

Of coursewebapckThere are many other configurations, such as code compression, modular classification, on-demand loading and so on. We will share them slowly

Interested partners can click here to learn more about the front-end learning process. Welcomestarfollow

Recommended Today

Comparison and analysis of Py = > redis and python operation redis syntax

preface R: For redis cli P: Redis for Python get ready pip install redis pool = redis.ConnectionPool(host=’39.107.86.223′, port=6379, db=1) redis = redis.Redis(connection_pool=pool) Redis. All commands I have omitted all the following commands. If there are conflicts with Python built-in functions, I will add redis Global command Dbsize (number of returned keys) R: dbsize P: print(redis.dbsize()) […]