Home > Developer > Web Develop
0 It is advisable to install the Webpack in the global first
NPM Install Webpack-g
1 Create a new folder, open the folder, initialize the Package.json file, install the Webpack dependencies (all basic Linux command operations, will be)
mkdir webpack-demo && cd Webpack-demo // New Webpack-demo folder and open the file npm init-y // Initialize the Package.json file,-y can save a Chase's default return setting npm install--save-dev webpack // Add to Package.json's devdependencies
2 Create the Src/js folder under the root of the program, new Index.js file
function component () { var element = Document.createelement ( ' div " ); /* used Lodash Plug-in method */ element.innerhtml = _.join ([ " hello ", " webpack "], " ' return 3 new index.html File
2 demo</title> <!--introduce Lodash plug-ins, which must be in order before index.js- <script src="https://unpkg.com/[email protected" ></script> < /head> <body> <script src="app/index.js"></script > </body>So far, open the index.html file in the browser, you can see Hello webpack, no problem. But at this time arbitrary move to the location of the JS file, (such as reversing the position of Lodash and Index.js), the page will be error. At this point in the page is only only two JS files, if the file is more, the dependence of more complex, more trouble.
The next step is the time of webpack transformation.
4 First install Lodash dependent
NPM Install--save Lodash5 Retrofit the Index.js file, introducing the Lodash module at the top of the file
from ' Lodash ' ; function component () { ...6 Transform the index.html file, cancel the reference to the Lodash plug-in, only reference a bundle.js file, the file is a consolidated summary of the original file, how to merge, continue to go down.
2 demo</title> //<script src= "https:// Unpkg.com/lodash@4.16.6 "></script> // <script src= "app/index.js" ></script> <script src="dist/bundle.js"></script> </body>7 Merging build Bundle.js files
Webpack src/js/index.js Dist/bundle.jsRunning the index.html file will still work correctly at this point. Consistent with the effect after the third step.
In addition to the above method, can also be modified by webpack.config.js way.
8 Create a new webpack.config.js configuration file (path is a small tool on the path provided in Nodejs). The configuration file can be configured for module loading rules (Webpack can not only handle JS and CSS, all modules), plugins, other enhanced services, etc. Then the direct execution of the configuration file can also be achieved with the same effect as the previous transformation method.
var path = require ('path'= { './src/js/ Index.js', output: { 'bundle.js', ' Dist ' ) }};Webpack--config webpack.config.js // Execute the configuration fileAt this point, we have listed two solutions, one is the seventh step to merge the method of generating bundle.js, one is through the configuration file, of course, you can also add the configuration file directly to the Package.json option, as follows.
{ ... " Scripts " : { "build""webpack " }, ...}After the configuration is ready, run directly
NPM Run BuildThe direct execution of the eighth step Webpack related commands is the same effect.
OK, the first entry guide to this end!!!
Webpack Introduction (0) (official turn)
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
