Open is dubious!

Webpack website

A, webpack

1.1 Functions of Webpack

The website explains:

  • Package all styles
  • Package all resources
  • Package all scripts
  • Pack all the pictures
  • Package all stylesheets

The browser can parse JS, CSS, and some static resources, but usually in the development we often use less, SASS, HBS (template engine), the browser is not directly recognize these things, you need a tool to convert them into the browser can recognize the way, now most people use the tool is – Webpack.

1.2 The nature of Webpack

Webpack is a static module bundler for modern JavaScript applications. 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.

1.3 Commonly used packaging tools in the market:

  • webpack
  • Rollup: More commonly used to package JS
  • parcel
  • Fis (Baidu)

1.4 Four Concepts

  • Entry: The original file to be packaged. Single-page applications generally have one entry, and multi-page applications generally have one entry for each page
  • Output: the location to which to pack.
  • Loader: something used to process a particular file format, such as CSS-loader or babel-loader.
  • Plugins: Loaders are used to convert certain types of modules. Plugins have a wider execution scope and affect the entire Webpack packaging process.
  • Mode: Set the mode parameter by selecting either Development or production.

2. Create a project

2.1 Installation Dependencies

The name of the new project cannot be called webpack

  1. In order to install things using NPM, first NPM init, then press Enter (NPM init -y doesn’t have to press enter all the way @ ○ ○)

A package.json file appears in the project

  1. npm i webpack webpack-cli -D

Webpack 4.0 will be installed separately – 2 more files in the CLI project

Q1: Can you now use webpack XXX directly from the console?

A1: No, to use the command directly in the console, you need to install webpack globally, but just entered -d, not -g. If you want to use webpack directly, you can do the following configuration in package.json scripts. It will automatically go to node_modules, your locally installed package, to find what you want.

  1. NPM run build detects warning and error

Warning that I haven’t set mode yet, webpack defaults to using ‘production’ to compile the code.

‘Production’ is understood as an online mode that compresses code; ‘development’ is understood as development mode, it is not compressed into disgusting looking code, so programmers can understand and debug it.)

Solution: Configure the pattern in build

The error indicates that THERE is no/SRC directory in my project and the project needs an entry point.

Solution: Create a new SRC /index.js file under the project

2.2 entry related

I’ll write console.log(‘123’) in the entry file SRC /index.js; Then NPM runs build

Warning and error are no longer displayed in the consoleDist /main.js is added to the project

In a closed loop, NPM run build automatically searches the SRC /index.js entry for the content and puts the packed content in the dist/main.js exit.

These are the most basic webpack operations, but we will not use all the default configurations in development, and will use some slightly more exotic operations on this basis.

2.3 Configuration File

Create a new webpack.config.js file, which is a Node script file that exposes the node configuration. Webpack reads the file and packages it.

Export default cannot be used for this file because webpack.config.js has not been converted to Babel and uses module.exports={}.

  1. Import entry file

Q2: Can the entry file only be called SRC /index.js? A2: Change the file name arbitrarily without entry, as long as it can match the path in the entry.

Q3: Can there be only one entry file?

A3: I don’t

The following two forms have the same meaning and the same function

Since an entry can be configured as an object, it indicates that there can be multiple entries. NPM run build finds that the name of the export file is the corresponding name of the import file by default

2.4 the output related

Output is configured as an object

As mentioned above, webpack.config.js is a node configuration, so you can use node-related modules, which use the path resolution module in Node.

Q4: What if my export file doesn’t want to be called main.js? The following configuration indicates that output.js in the dist folder in the current directory is an export file

If filename is not configured, the default export file is called main.js

Dist output.js (dist

Errors will be reported

References defined by WebPack can be filled in with []

The result is the same as if output{} had not been configured.

Q5: How do export files in projects usually have a string of hash values (main.xxxxXXXXXXXX.js) on them? A5: Configure [name].[hash].js

Q6: the hash value is too long. A6: [name].[hash:6].js will intercept the first six hash values.

Q7: What if I suddenly find that the hash value generated by two entry files is the same?

And if I change the contents under SRC /home.js, do it again

It is found that the hash value of the about.js that has not been changed has also changed

A7: The above hash configuration applies to the entire Webpack packaging process, using Chunkhash to generate different hash values for different modules.

Only the home.js file is changed, and only the hash value of the home.js file changes after packaging.

There are three types of hash in Webpack: the first is the hash that is used throughout the packaging process; the second is chunkhash, which can generate the corresponding hash for different modules and is used more frequently; and the third is contenthash, which is used less frequently and computes the hash based on the content

2.5 Changing the Configuration File Location

By default, webpack.config.js is stored in the root directory, which is usually stored in scripts or buuild folder during development. In this case, you need to configure the package.

The packaged files are automatically placed under scripts/dist

Because the export folder in the configuration file where the package file was written is at the same level as the configuration file

The name of the webpack.config.js configuration file can also be changed, as long as the configuration file configured in package.json matches

I am Yangyang Li, a front-end brick moving younger brother

Ten thousand years is too long, seize the day, see you next time