Webpack Getting Started Guide
Category Programming Techniques
Webpack is a front-end resource loading/packaging tool. It performs static analysis based on the dependencies of modules, and then generates corresponding static resources according to specified rules.
>
This section has been tested with Webpack3.0.
From the diagram, we can see that Webpack can convert various static resources such as js, css, and less into a single static file, reducing page requests.
Next, we will briefly introduce the installation and use of Webpack.
Install Webpack
Before installing Webpack, you need to have node.js supported in your local environment.
Due to the slow installation speed of npm, this tutorial uses the Taobao mirror and its command cnpm. For installation and usage instructions, refer to: Using Taobao NPM Mirror.
Install webpack with cnpm:
cnpm install webpack -g
Create a Project
Next, we create a directory called app:
mkdir app
Add a file called tutorialpro1.js in the app directory with the following code:
app/tutorialpro1.js file
document.write("It works.");
Add an index.html file in the app directory with the following code:
app/index.html file
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
Next, we use the webpack command to package:
webpack tutorialpro1.js bundle.js
Executing the above command will compile the tutorialpro1.js file and generate the bundle.js file. After a successful compilation, the output information will be as follows:
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./tutorialpro1.js 29 bytes {0} [built]
Open index.html in the browser, and the output result will be as follows:
Create a Second JS File
Next, we create another js file called tutorialpro2.js with the following code:
app/tutorialpro2.js file
module.exports = "It works from tutorialpro2.js.";
Update the tutorialpro1.js file with the following code:
app/tutorialpro1.js file
document.write(require("./tutorialpro2.js"));
Next, we use the webpack command to package:
webpack tutorialpro1.js bundle.js
Hash: dcf55acff639ebfe1677
Version: webpack 1.12.13
Time: 52ms
Asset Size Chunks Chunk Names
bundle.js 1.55 kB 0 [emitted] main
[0] ./tutorialpro1.js 41 bytes {0} [built]
[1] ./tutorialpro2.js 46 bytes {0} [built]
When accessed in the browser, the output result will be as follows:
Webpack performs static analysis based on the dependencies of modules, and these files (modules) will be included in the bundle.js file. Webpack assigns a unique id to each module and indexes and accesses the modules through this id. When the page starts, the code in tutorialpro1.js will be executed first, and other modules will be executed when the require is run.
LOADER
Webpack can only handle JavaScript modules by itself. If you need to handle other types of files, you need to use a loader for conversion.
So if we need to add a css file to the application, we need to use css-loader and style-loader, which do two different things. css-loader will traverse the CSS file, then find the url() expressions and process them, and style-loader will insert the original CSS code into a style tag on the page.
Next, we use the following command to install css-loader and style-loader (global installation requires the parameter -g).
cnpm install css-loader style-loader
After executing the above command, a node_modules directory will be generated in the current directory, which is the installation directory for css-loader and style-loader.
Next, create a style.css file with the following code:
app/style.css file
body {
background: yellow;
}
Modify the tutorialpro1.js file with the following code:
app/tutorialpro1.js file
require("!style-loader!css-loader!.
Of course, we can use the webpack-dev-server development service, so that we can start an express static resource web server through localhost:8080, and it will automatically run webpack in watch mode. By opening http://localhost:8080/ or http://localhost:8080/webpack-dev-server/ in the browser, you can view the pages in the project and the compiled resource outputs, and a socket.io service will monitor their changes in real time and automatically refresh the page.
Installation
cnpm install webpack-dev-server -g
Running
webpack-dev-server --progress --colors ```
When you open http://localhost:8080/ in the browser, the output will be as follows: