Home > Developer > Web Develop
1. Installation:
To install node. JS First, node. JS has its own package Manager Npm,webpack needs support for node. JS v0.6 above, it is recommended to use the latest version of node. js.
Installing webpack:$ npm install webpack-g with NPM
At this point Webpack has been installed in the global environment, you can try the command line webpack-h.
Typically, we install Webpack into a project's dependencies so that we can use the Webpack of the project's local version.
# Enter project directory
# Make sure you have Package.json, not created by NPM Init
# Install Webpack dependencies
$ NPM Install Webpack-save-dev
Webpack currently has two major versions, one in the master backbone of the stable version, one in the Webpack-2 branch of the beta, Beta has some experimental features and is incompatible with the stable version, in the official project should use stable version.
# View Webpack Version information
$ NPM Info Webpack
# Install the specified version of Webpack
$ NPM Install [email protected]--save-dev
If you need to use the Webpack development tool, install it separately:
$ NPM Install Webpack-dev-server-save-dev
2. Using Webpack
First create a static page index.html and a JS entry file Require.js:
<!--index.html--
<meta charset= "Utf-8" >
<body>
<script src= "Bundle.js" ></script>
</body>
Require.js inside the content of random edit points
document.write (' This is my first webpack example. ')
Then compile the require.js and package it to bundle.js://bundle.js is a large package compiled by a newly generated JS
$ webpack require.js bundle.js
The packaging process displays logs:
Hash:e964f90ec65eb2c29bb9
Version:webpack 2.3.2
Time:54ms
Asset Size Chunks Chunk Names
Bundle.js 1.42 KB 0 [emitted] main
[0]./require.js bytes {0} [built]
Opening index.html with a browser will see this is my first webpack example. 。
Next add a module module.js and modify the ingress Require.js:
Module.js
Module.exports = ' This is from Module.js. '
Require.js
document.write (' This is my first webpack example. ')
document.write (Require ('./module.js '))//Add Module
RePack Webpack require.js bundle.js after refreshing the page to see the changes ' This is my first webpack example. This is from Module.js. '
hash:279c7601d5d08396e751
Version:webpack 2.3.2
Time:63ms
Asset Size Chunks Chunk Names
Bundle.js 1.57 KB 0 [emitted] main
[0]./require.js bytes {0} [built]
[1]./module.js bytes {0} [built]
Webpack parses the entry file and parses the individual files that contain the dependencies. These files (modules) are packaged in Bundle.js. Webpack assigns each module a unique ID and indexes and accesses the module through this ID. When the page starts, the code in Require.js is executed first, and the other modules are executed when the require is run.
Automatic compilation monitoring
When the project becomes larger, the compilation time of the webpack becomes longer, and the output of the compilation can be made with the progress and color through the parameters.
$ webpack--progress--colors
If you do not want to recompile each time you modify the module, you can start the listening mode. When listening mode is turned on, the unchanged modules are cached in memory after compilation, and are not recompiled every time, so the overall speed of the listening mode is very fast.
$ webpack--progress--colors-watch //Edit auto-compile after saving
Of course, using the Webpack-dev-server development service is a better option. It will launch an express static resource Web server in localhost:8080, and will automatically run Webpack in listening mode, open http://localhost:8080/or http://localhost:8080/in the browser webpack-dev-server/can browse the pages in the project and the compiled resource output, and monitor their changes in real time through a Socket.io service and refresh the page automatically.
# installation
$ NPM Install Webpack-dev-server-g
# Run
$ webpack-dev-server--progress--colors
Webpack Installation and use
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
