Skip to main content

Basic Usage

Webpack will use one or more files as the packaging entry point, compile all the files in the project into one or more output files, namely bundle, which can be run in the browser.

Resource directory​

webpack_code # Project root directory
└── src # Project source directory
├── js # js file directory
│ ├── count.js
│ └── sum.js
└── main.js # Project main file

Create files​

count.js
export default function count(a, b) {
  return a - b;
}
sum.js
export default function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
main.js
import count from './js/count';
import sum from './js/sum';

console.log('Difference:', count(10, 3)); // 7
console.log('Sum:', sum(1, 2, 3, 4, 5)); // 15

Download dependencies​

Open the terminal, enter the project root directory, and run the following command to initialize package.json:

npm init -y

A basic package.json file will be generated at this time:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Note that the name field in package.json cannot be called webpack, Otherwise, the next step will report an error.

Then download the dependencies:

npm i webpack webpack-cli -D

Enable Webpack​

Development mode

npx webpack ./src/main.js --mode=development

Production mode

npx webpack ./src/main.js --mode=production

  • npx webpack: Run the locally installed Webpack package.

  • ./src/main.js: Specify Webpack to start packaging from the main.js file, including its dependent files.

  • --mode=xxx: Specify the mode (environment).

Observe the output file​

By default, Webpack will package and output the files to the dist directory. Just check the files in the dist directory.

Summary​

Webpack itself can only process JS resources. When processing other types of resources (such as CSS), additional loader and plugin need to be configured.

Loading Comments...