write in front
This blog also refers to other people's webpack entry, plus some of my own operations, as well as the difficulties I encountered in this process. If you are a beginner or an expert in this area, please detour and do not complain.
text begins
Why should we learn webpack
First of all, why do we need to learn front-end automated build tools? When I started to understand automated build tools, I found it very troublesome. I had to configure the environment and type commands, just to package those files in a file called bundle.js? What's the point of that?
After reading the documentation for a long time, I didn't understand the benefits. So I went to refer to the blog of the predecessors.
- Modularity allows us to refine complex programs into small files;
- Similar to TypeScript, a development language extended on the basis of JavaScript: it enables us to implement features that cannot be used directly in the current version of JavaScript, and can later be converted into JavaScript files so that browsers can recognize them;
- CSS preprocessors like Scss, less and more.
Well, now we understand why we should use him.
How webpack works
The way Webpack works is: take your project as a whole, through a given main file (eg: index.js), Webpack will start from this file to find all the dependent files of your project, use loaders to process them, and finally Packaged as one (or more) browser-recognized JavaScript files.
Officially begin
Before that, you need to install the node environment. For the specific method, please refer to Baidu.
The first step is to create a new folder, here I am called webpackstudy, and then use the command line to enter.
The second step, installation, if you want other files to be available, it is recommended to install a global one, otherwise install a local one.
Install globally: npm install -g webpack
Install into the project directory: npm install --save-dev webpack
After such a string of yellow displays, it is installed.
Initialize the project: npm init
After doing this step, this file will appear in your project
Enter this command, the command line will prompt you to enter a series of information, if you are not ready to publish, just press Enter.
The package.json file is ready, we install Webpack as a dependency package in this project
// 安装Webpack
npm install --save-dev webpack
Go back to the previous empty folder and create two folders in it, the app folder and the public folder. The app folder is used to store the original data and the JavaScript modules we will write, and the public folder is used to store it for later browsing. The files read by the browser (including the js file generated by webpack packaging and a index.htmlfile). Next we create three more files:
index.html--Put it in the public folder;Greeter.js-- put it in the app folder;main.js-- put it in the app folder;
The folder structure is as follows:
We write the following code in index.html, its purpose is to introduce the packaged js file bundle.js
Write the following code in Greeter.js. The purpose of this file is to create a node for the index page and insert a statement
Write the following statement in main.js:
I wrote the second half last night, but it kept prompting me to have sensitive text when I submitted it. After I modified it, I clicked submit for the second time without any prompt, and I don’t know if the submission was successful or not, but if I refresh it, it will be reloaded. I wrote it before. The good will disappear, so I have to save it in word, and then copy it over, and the copied image has to be replaced again. But after I tried it many times, it was still prompted that there was sensitive text, so I failed to submit it after 5 times of reciprocation. I thought it was a bug, so I submitted the second half to Jianshu. All are welcome to read.