Making a complete profile address: https://github.com/yhtx1997/webpack4-Instance

Because the length is too long, it is recommended to read it in sequence

Basic Configuration

The main content

  • Install webpack4
  • Directory initialization
  • Configuration initialization
  • Entry and multi-entry configuration
  • Export configuration

Install webpack4

Before installing WebPack, ensure that nodeJS and NPM are installed

Create an NPM project

npm init -y
Copy the code

Init indicates that a project is initialized. -y indicates that a project is initialized. If not, the project name, version number, author, etc.

Install webpack4

npm install webpack webpack-cli webpack-dev-server -D
Copy the code

This is actually a merge command, unpack it

npm install webpack -D
npm install webpack-cli -D
npm install webpack-dev-server -D
Copy the code
  • Install C. -d indicates the installation to the local development environment. The global installation is not used because each project may use different WebPack versions, resulting in conflicts
  • The first installation is the core webPack file, which is like the installation package
  • The second is to have WebPack support command-line commands like NPM run dev
  • The third installation is an extension pack that enables WebPack to support real-time compilation

Initialize the NPM configuration and files

The goal at this stage is to get it up and running. There should now be a folder and two.josn files in the directory

  • Node_modules is used to store all installed NPM packages
  • Package. json configures the script for NPM run and contains project information about which packages are installed
  • Package-lock specifies the version source of the package to ensure that all developers on the project are using the same version

Adjust the package. The json

The official recommendation is to remove entry configuration from files to prevent accidental release of your code.

"main": "index.js"
Copy the code

And add private property configuration

"private": true
Copy the code

To run webpack, you can type NPX webpack on the command line. However, when you configure the development environment and production environment, you need to write a lot of parameters. Therefore, you need to add an NPM script, and then run NPM run test

 "test": "webpack"
Copy the code

It ends up looking something like this

Create import file and generate export file

In WebPack 4, you can do this without any configuration. After you have done this, you can run Webpack by typing NPM run test on the command line (test is defined in the scripts above), but you will get this result.

This is because the entry file does not exist, webpack defaults to the./ SRC /index.js file in the current directory as the file to be packed (entry), create a new SRC directory and index.js file, it will work.

A dist directory is generated with main.js in it, which is the default packaged file and directory (exit), and a Webpack is initialized.

Note:

  • If only one JS is required for final release, it is recommended at development time to import only other JS files (import) in index.js.
  • As of December 31, 2018, as far as I know, import and export are still only conceptual standards, js cannot support import and export. Everyone can use them because Babel is configured and compiled through Babel. The code that makes it node.js so that it can treat this command as a loading module. Nodejs uses the CommonJS specification. For ES6, see the ES6 Module syntax.

Webpack4 Inlet and outlet configurations

As mentioned above, Webpack4 can now be used without any configuration files, but some things are better left to your own liking

Creating a Configuration File

Create a new webpack.config.js file in the current directory and write the code

const path = require('path'); //[1] module.exports = { //[2] };Copy the code
  • 1 is the introduction of node’s path module, so that it can handle file and directory paths, because the Windows and Linux series have different representation of paths.
  • 2 is the contents of the exposed curly braces {} to write our custom configuration
  • Note: As for the configuration file name, wepack4 introduces./webpack.config.js by default. If you want to change the name yourself, you can enter the code on the command line, where webpack –config is required and my.config.js is the path of your own configuration file
webpack --config my.config.js
Copy the code

Entrance to the configuration

To prove that the entry really works, I changed the file name of./ SRC /index.js to 2048.js and put it in./ SRC /js/2048.js; And modify the code

const path = require('path');

module.exports = {
    entry: "./src/2048.js"//add
};
Copy the code

If you do not add the interface code, you will receive the error that the entry cannot be found. If you add the interface code, you will display the normal output, and there will be a more 2048. Js file under./dis.

Multiple entry configuration

Entry can assign not only strings of absolute paths, but also arrays or objects of multiple paths

entry: './src/2048.js'// Single entry string entry: ['./src/js/2048.js'.'./src/js/1024.js'.'./src/js/512.js']// Entry: {// entry 2048:'./src/js/2048.js',
    1024: './src/js/1024.js',
    512: './src/js/512.js'
  }
Copy the code

Export configuration

Exits are not quite the same as entrances, which can have many but only one output configuration.

output: {
    filename: '2048.js',
    path: 'C:/Users/GengShaojing/Desktop/2048/dist'
}
Copy the code
  • Filename Specifies the name of the packaged file.
  • Path Specifies the absolute path of the packaged file.

Multiple entry and multiple output files

output: {
    filename: '[name].js',//[1]
    path: path.resolve(__dirname, 'dist') / / [2]}Copy the code
  • 1 [name] indicates the name of the file or the key value of the object passed by entry
  • 2 __dirname points to the absolute path of the current file (the Webpack configuration file), path.resolve is the resolved path followed by dist
A different file name is generated after each change
output: {
    filename: "[name].[chunkhash].js",
    path: path.resolve(__dirname, 'dist')}Copy the code

Filename supports the following attributes and can coexist

  • [name] The module name is either the file name or the object key

  • [id] The module identifier should be the subscript value of the incoming entry order starting at 0

  • [hash] the hash value of the module identifier

  • The hash value of the [chunkhash] content generates a string based on the content

  • [contenthash] The extracted content generates a hash value that generates a string based on the extracted content

  • Note: the official recommended [name] plus [chunkhash] mode

  • Note: The hash value is the identification information extracted by the algorithm, which is equivalent to the person and the fingerprint input. The hash value is the machine for the person to input the fingerprint, and the final string is the fingerprint