Share webpack example tutorials

Webpack is a front-end resource loading/packaging tool. It will perform static analysis based on module dependencies, and then generate corresponding static resources for these modules according to specified rules.

Install Webpack

Before installing Webpack, your local environment needs to support node.js.

Due to the slow installation speed of npm, this tutorial uses Taobao's image and its command cnpm

First install webpack globally, then npm initializes a project, and locally installs webpack development tools

$ npm install webpack -g

npm init (项目名称)

$ npm install webpack-dev-server --save-dev

Create the app folder in the project directory, create the index.js file, and write the following code

console.log('hello world');

Open the command line in the project folder and enter the following command

webpack app/index.js build/index.js

If the following code appears, it is successful

Look at the code of the build/index.js file:

## You can see that line 73 is the code of our app/index.js file

We will analyze the specific source code another day. Today our main purpose is to experience it.

It is too inefficient to type codes one by one. We can complete more advanced functions through the webpack.config.js file.

The above is the detailed content of Share webpack example tutorials. For more information, please follow other related articles on the PHP Chinese website!