The easiest example of the webpack4 entry

WebPack should be a more packaged tool for front-end, so what should I do if I have not touched this piece? The answer is very obvious, see information, check the document, you can figure it out, go to knock, run a run;

Webpack is the most popular front-end resource modular management and packaging tool, it can make a lot The loose module is packaged into a front-end resource that meets the deployment of the production environment, and can separate the modules that are loaded on demand, etc., when actually needed, asynchronously.

WebPack and GRUNT and GULP have any feature

Gulp / GRunt is a tool capable of optimizing the development process of the front end, and WebPack is a modularity Solution, but WebPack’s advantage makes WebPack to replace tools for Gulp / GRUNT classes.

GRUNT and GULP work mode are: in a configuration file, specify the specific steps for certain files to compile, combine, compression, and other tasks.

WebPack’s way to work is: Take your project as a whole, through a given primary file (such as index.js), WebPack starts from this file to find all the dependencies of your project, Use Loaders to process them, and finally packaged as a browser recognizable JavaScript file.

So, here I will take this process while running this process, including what problems during the process, how to solve it, will also serve one by one;

First step:

We need to install npm, this as long as you have the Nodejs running the environment; this block is not described in this side

We will choose to make all installations and operations in the project directory, don’t choose global installation;

in the computer Newly built a project folder, such as WebPackDemo

Next, we entered this project folder through CMD, and enter the execution npm init, enter, and perform initialization:

webpack4 入门最简单的例子介绍 webpack4 入门最简单的例子介绍

Next, for the configuration items such as Package Name, we completely choose to enter the bus directly, in the end!

webpack4 入门最简单的例子介绍 When it is OK!

At this time, there are more files in our project folder: package.json

webpack4 入门最简单的例子介绍 Step 3:

Since you want to use WebPack Pack, then we will come to install Webpack. At first, we have finished completing in the project folder, do not do global installation; then enter NPM Install – Save-Dev Webpack, Enter:

At this time our project folder, there have been more folders and a JSON file:

webpack4 入门最简单的例子介绍 Fourth step:

We can now start writing your own project, then I will write according to the example of usually sharing, first, first, under the project folder Newly built two files and applications;

webpack4 入门最简单的例子介绍 APP folder is written to Test.js and main.js; public folder is written into index.html;

Draw someone else Example:

WebPack Demo

module.exports = function () {var test = document.createElement ('Div) '); Test.TextContent = "hi there and testing!"; return test;};

VAR test = Require (‘./ Test.js’); Document.GtelementByid (‘root’). Appendchild (test ());

According to the truth, it can now be packaged. The last result is to operate main.js as the main entrance, and finally in the public folder. Mid yourself after a package OK: bundle.js; then we open the index.html file will display the sentence we just now in the page;
But ignore a problem, that is our What should I do? Are you going to operate in the command line? This is definitely very troublesome, then we will build a file in the project directory: WebPack.congfig.js, write configuration file inside:

Module .exports = {entry: __dirname + “/app/main.js” ,// Entrance file Output: {path: __dirname +” / public “, // packaged file storage directory filename:” bundle.js “// Packaged output file file name}}
We can start running through node_modules / .bin / webpack;
problem Come:

1, error!

Solution: node_modules \ .bin \ Webpack “/” changed to “\”

2, still not!

 It's not the original mistake, then what does this mean?   

The second line we will find that we will install the WebPack version of 4, then in 4, default No configuration files (it absorbs PARCEL’s ideology, zero configuration); since the thoughts are different, is it going to do it in front of this, come back, replace it into 4? Obviously, I am not willing. After all, I will do it now, then I will change it according to the step by step; Take later:

webpack4 入门最简单的例子介绍 We Come along, enter Yes, Enter, and install WebPack-CLI

After installation, Node_Modules \ .bin \ Webpack;

3, new warnings and error!

The mentality exploded? Don’t tighten, soon it will be OK! webpack4 入门最简单的例子介绍

Look at the previous line, is the correct operation result, but when viewing the project folder, not this, the reason is behind the line, yellow, red warning And an error!

First watch the warning, simple point, meaning is to set the mode: 4 No configuration file, but do not say no model, the mode is divided into two: production mode and development mode; only need to mark Ok!

webpack4 入门最简单的例子介绍 Look at an error, what does it mean?In fact, he needs an SRC folder. In fact, this SRC folder is our previous App folder, then we remember the name, app changed to SRC;

OK, then accept a blow!

4, running node_modules \ .bin \ Webpack –Mode Development, there is also a line of errors!

webpack4 入门最简单的例子介绍 Very familiar error, just give us reports, just so changed, where is this problem? We open Package.json;

Chapter 5, “Main”: “index.js”, is it already known? Then we change the entrance file main.js in the SRC to INDEX.JS, run again!

Success! ! !

Finally, we have generated a new file main.js after packaging, and is in a new folder DIST;

for us Webpack.congfig.js file, don’t care at all, because WebPack 4 does not need to configure files by default! webpack4 入门最简单的例子介绍

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment