Default configuration items for WebPack

Webpack – CLI makes it possible to run Webpack from the command line.

We can compare the result of webpack without any configuration with that of webpack after configuration. Our example is to import the three modules header.js, side.js and footer.js in the index.js file, and then package the index.js.

1. Packaging method 1: without any configuration (i.e. no webpack.config.js file)

Package command: NPX webpack. / SRC /index.js

$ npx webpack ./src/index.js [webpack-cli] Compilation finished Hash: c1c23e1096598377d358 Version: Webpack 4.44.2 Time: 169ms Built at: 2020/11/05 morning 12:53:04 Asset Size Chunks Chunk Names. The main js 1.31 KiB 0 [emitted] main Entrypoint main. = the main js [0] ./src/index.js + 3 modules 812 bytes {0} [built] | ./src/index.js 123 bytes [built] | ./src/header.js 229 bytes [built] | ./src/side.js 230 bytes [built] | ./src/footer.js 230 bytes [built]Copy the code

The result: a dist folder is generated, and a main.js file is generated in that folder

2. Package method 2: create webpack.config.js file and set the content as the default

The contents of the webpack.config.js file are as follows:

// Introduce node's path module
const path = require('path');

module.exports = {
  entry: './src/index.js'.// Import file
  output: {
    filename: 'main.js'.// The output file name
    path: path.resolve(__dirname, 'dist') // The path of the output file (__dirname refers to the directory where the configuration file is located)}}Copy the code

Pack command: NPX webpack

There is no need to specify the path to the package file because it is already configured in the entry field of the webpack.config.js file

$NPX webpack [webpack-cli] Compilation finished Hash: b0ddda990ab61b7536be Version: webpack 4.44.2 Time: 435ms Built at: 2020/11/05 morning 12:49:41 Asset Size Chunks Chunk Names. The main js 1.31 KiB 0 [emitted] main Entrypoint main. = the main js [0] ./src/index.js + 3 modules 812 bytes {0} [built] | ./src/index.js 123 bytes [built] | ./src/header.js 229 bytes [built] | ./src/side.js 230 bytes [built] | ./src/footer.js 230 bytes [built]Copy the code

The result: a dist folder is generated, and a main.js file is generated in that folder. The result is the same as that if the default value is not configured.

3. Package method 3: Create webpack.config.js file and modify the package output path and file name

The contents of the webpack.config.js file are as follows:

// Introduce node's path module
const path = require('path');

module.exports = {
  entry: './src/index.js'.// Import file
  output: {
    filename: 'bundle.js'.// The output file name
    path: path.resolve(__dirname, 'bundle') // The path of the output file (__dirname refers to the directory where the configuration file is located)}}Copy the code

Pack command: NPX webpack

$NPX webpack [webpack-cli] Compilation finished Hash: b0ddda990ab61b7536be Version: webpack 4.44.2 Time: 139ms Built at: Emitted Asset Size Chunks Names bundle.js 1.31 KiB 0 [emitted] main Entrypoint main = bundle.js [0] ./src/index.js + 3 modules 812 bytes {0} [built] | ./src/index.js 123 bytes [built] | ./src/header.js 229 bytes [built] | ./src/side.js 230 bytes [built] | ./src/footer.js 230 bytes [built]Copy the code

Result: a bundle folder is generated, in which a bundle.js file is generated.

Two, Webpack packaging skills

1. Specify the configuration file package

  • When using Webpack, the default configuration file (webpack.config.js) will be found first. If not, the default configuration item of Webpack will be used.
  • The default webpack configuration file name iswebpack.config.jsIf you want to package a configuration file with another name, you need to specify the configuration file name. As follows:
npx webpack --config  anynameconfig.js
Copy the code

Configuration file defaults (important ones to mention again)

// Introduce node's path module
const path = require('path');

module.exports = {
  entry: './src/index.js'.// Import file
  output: {
    filename: 'main.js'.// The output file name
    path: path.resolve(__dirname, 'dist') // The path of the output file (__dirname refers to the directory where the configuration file is located)}}Copy the code

2, use,npm scriptsOptimized package command

The package.json file is modified to look like the commands in vue and React.

{
  "name": "learnwebpack"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "bundle": "webpack" // Use the bundel command to execute the webpack command
  },
  "author": ""."license": "ISC"."devDependencies": {
    "webpack": "^ 4.44.2"."webpack-cli": "^ 4.1.0." "}}Copy the code

Note: Here we can use NPM run bundle instead of the NPX webpack command. And in scripts we write webpack instead of NPX webpack


Run the NPM run bundle command

$NPM run bundle > [email protected] bundle C:\web\ LearnWebpack > webpack [webpack-cli] Compilation finished Hash: B0ddda990ab61b7536be Version: Webpack 4.44.2 Time: 136ms Built at: Emitted by Entrypoint main = bundle.js Asset Size Chunks 1.31 KiB 0 [emitted by Entrypoint main = bundle.js] ./src/index.js + 3 modules 812 bytes {0} [built] | ./src/index.js 123 bytes [built] | ./src/header.js 229 bytes [built] | ./src/side.js 230 bytes [built] | ./src/footer.js 230 bytes [built]Copy the code

Note: we are using the NPM command instead of the NPX command.