inotgo.com

Step 1 : Introduce   
Step 2 : node.js   
Step 3 : about webpack edition   
Step 4 : Create project   
Step 5 : Install webpack   
Step 6 : a.js   
Step 7 : use webpack Command packaging   
Step 8 : index.html   
Step 9 : Open index.html   
Step 10 : Runnable project   

What is? webpack? Students who have done more complex projects will know , A project that includes the front end , There may be more than one in it .js, Multiple .css , Multiple still pictures , Multiple other front-end resources .
Some js Resources were previously dependent on each other , When a page needs to load multiple .js If so , It will also drag down the loading speed of the whole page .
So to solve this problem , As shown in the figure ,webpack Just put all kinds of static resources on the left , Packed into a so-called assets. In this way, the browser loads much faster .
 Introduce
webpack The operation of , Need to rely on node.js Of the operating environment , So please install node.js.
yes node.js Unfamiliar students , Please refer to node.js course
webpack Now the version has been released to 4 Yes . But it's unstable , There are strange bug. and 4 Some practices of are quite different from those of previous versions . This leads to the use of 4, Make all kinds of... Found on the Internet webpack Tutorials are not available .
More Than This , webpack yes windows The compatibility of is not very good , Many times stay Linux Run well on the , here we are windows I can't run on the .
The webmaster experimented with various versions , Finally determined , stay windows Inside installation , use cnpm Installation mode @1.13.2 The version works properly . This will save you a lot of time , Don't take the detour of the stationmaster .
Create the project directory in the following location

E:\project\webpack-demo

Project directory name Don't use it webpack , Yes webpack The use of tools conflicts
 Create project
When installing , Do not use npm, Otherwise, in windows It will fail in the . Please use cnpm
cnpm It is a domestic mirror image , Students who don't know , Please jump to cnpm course .
Next, install webpack, Use global installation :

cnpm install -g [email protected]


As shown in the figure, after installation , function

webpack

You will see a lot of command parameters , among , You'll see the version at the beginning : webpack 1.13.2
 Install  webpack
Create... In the project directory a.js.
this js It's simple , Just output a line "hello webpack"
document.write("hello webpack");
document.write("hello webpack");
Step 7 :

use webpack Command packaging

edit top fracture
Run in the project directory

webpack a.js bundle.js

Its operation results in a.js Packed into bundle.js In the document .
From a production point of view , Pack one .js File to another .js The document has no practical significance , But here is a demonstration of this effect , Learn from the opportunities behind and see more complex and powerful functions .
 use  webpack  Command packaging
Prepare one index.html, Use this bundle.js File .
<html> <head> <script src="bundle.js"></script> </head> </html>
<html>
    <head>
        <script src="bundle.js"></script>
    </head>
</html>
Open index.html , You can see the reference bunlde.js The effect after .
 Open  index.html
In the upper right corner, there is the runnable Project Download corresponding to this knowledge point , I really can't do it myself , Just download and unzip it and compare it .


The official account of programming , Follow and get the latest tutorials and promotions in real time , thank you .


Q & A area    
2021-07-10 Xiaobai , Why is there no video . Look a little confused
jx18512612494

Xiaobai , Why is there no video . Look a little confused







The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see




2021-02-18 about webpack download
Luo Xiaohei _ black

“webpack, stay windows Inside installation , use cnpm Installation mode @1.13.2 The version works properly “. Hello, stationmaster 、 Please ask , How long was this article written 、 Do you still need to download this version now ?




3 One answer

Songzi
Answer time :2021-06-26
Why did the webmaster leave our group of hardworking people who love science and Technology

i am hungry
Answer time :2021-05-19
Put an eye here , See if the webmaster is really gone

up-bear
Answer time :2021-05-05
The webmaster won't answer you ,17 Years later, the webmaster disappeared



The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see








Please... Before asking questions land
The question has been submitted successfully , Auditing . Please My question Check the question record at , thank you
about Front end part -webpack- Getting started Your questions

Try to provide Screenshot code and Abnormal information , Help to analyze and solve problems . You can also enter this station QQ Group communication : 496725845
Ask questions and try to provide complete code , Environment description , The more conducive to the recurrence of the problem , The faster your question can be answered .
Have questions about the code in the tutorial , Please provide which step , Which line is in doubt , This makes it easy to quickly locate the problem , Improve the speed at which questions are answered
In the thousands of questions that already exist , A considerable proportion , Because of the use of and webmaster Different versions of the development environment Resulting in , For example jdk, eclpise, idea, mysql,tomcat Wait, the version of the software is inconsistent .
Please use the same version as the webmaster , You can save yourself a lot of learning time . The webmaster sorted out the software versions used in teaching , It's all here , Convenient for everyone to download : /k/helloworld/helloworld-version/1718.html

Upload screenshot