Everybody is good! Webpack 4 comes with a lot of updates. One of them is that webPack 4 doesn’t require configuration files by default.

Initialize the project

First create the project, create a folder called webpack, enter the folder and use NPM init to initialize it as follows:

// Create a directory and go to mkdir webpack &&cd The $_NPM I webpack -d NPM I webpack-cli -d NPM I webpack-cli -dCopy the code

Create a directory

Create a new SRC directory and place the source code.

// Create a SRC directory mkdir SRC // go to the SRC directory and create index.js touch index.js tool.jsCopy the code

The directory structure is as follows:

|---- src
    |---- index.js
    |---- tool.jsCopy the code

The contents of the index.js and tool.js files are as follows:

// tool.js
module.exports = 'webpack';
// index.js
var str = require('./tool');
var hello = 'hello';
console.log(`${hello} ${str}`);Copy the code

After the above content is ready, we run the NPX webpack command in the webpack directory. After executing the command, we check the webpack directory and generate a dist directory. After entering the dist directory, we will see the main.js file, which is the packed and compressed file of Webpack.

Tips: NPX is an easy way for developers to access Node
Modules within the bin on the command line tools, NPX webpack equivalent to execute the node_modules/webpack/bin/webpack, NPX in development is very convenient and recommended installation: NPM install – g NPX.

Here we can see the difference between WebPack 4 and previous versions where you had to define an entry point via the Entry property in a configuration file called webpack.config.js. An Output file is defined through the Output attribute. In WebPack 4, you do not have to define either an entry point or an Output file. The default entry point is the index.js file in the SRC directory, and the default output file is the main.js file in the dist directory.

Production and development modes

After packing with the command NPX webpack, a warning appears on the console ⚠️ :

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/Copy the code

In fact, WebPack 4 introduces production and development patterns. We can do this in package.json.

"scripts": {
  "dev": "webpack --mode development"."build": "webpack --mode production"
}Copy the code

From webpack: NPX webpack -d, from dist to main.js, we can see that this is an uncompressed file. Now from back to webpack: NPX webpack -p, then go to the dist directory and look at the main.js file. We find a bundle that has been compressed. Production Mode can be optimized right out of the box, including compression, scoping, tree-shaking, and more.

Modify the package output directory

If we want to change the default output directory of webpack, we need to use the webpack command –output, we will change the NPM script above:

"scripts": {
  "dev": "webpack --mode development --output ./output/main.js"."build": "webpack --mode production --output ./output/main.js"
}Copy the code

When NPX webpack -p is executed, webpack will output the packaged file to output/main.js.

summary

In this chapter, we demonstrate the use of webpack-cli command to complete the zero configuration of Webpack packaging. Webpack-cli command has many options, you can refer to the webpack-cli documentation for details. Here I summarize the most common options:

1. Webpack-cli supports two shortcut options: -d and -p, which represent the packaging of the development environment and production environment respectively.


2. Use the –display-error-details parameter to print error information: NPX webpack –display-error-details.


3. You can make the compiled output with progress and colors by using the command: NPX webpack –progress –colors.


4. If you don’t want to recompile every time you modify a module, you can enable the listening mode. After enabling this mode, the modules that do not change will be cached in memory after compilation, instead of being recompiled every time, so the overall listening mode is very fast: NPX webpack –watch.


5. Use the -hot option to enable the hot Module Replacement mode.


6. Use the -profile option to output the time of each link in detail and check the packaging speed bottleneck.


7. Run -config to specify the path of a Webpack configuration file.