Since it was done in a hurry in less than an afternoon, the original intention was just a whim, so under various circumstances, the first version was released for everyone to use
Provide git address
https://github.com/keaderzyp/webpack_cli.git
ssh:[email protected]:keaderzyp/webpack_cli.git
To explain in advance, because the time is relatively short, the author only has a mac, so the test is also tested in the mac environment. Although node is cross-platform, some differences are still found in the use of windows and mac.
For example, when using img tags to refer to pictures, windows and mac are not the same, so if the configuration in url-loader has any problems, please modify it by yourself.
In the later stage, I will further improve this tool and turn it into a one-click installation tool. Here you need to download and configure it yourself, and the overall necessary functions are available.
So let's talk about the prerequisites:
Hardware environment: mac or windows (what computer does not matter)
Software environment: Node development environment 6.3 or above is required, and npm should preferably be the latest version
Use common sense: understand the basics of node.js, have a certain base of dos or linux or unix operation instructions, and be proficient in using npm package management tools, familiar with common npm instructions, and understand the error debugging of the system console
There is a powerful development tool similar to hbuilder. It is best to use hubilder, which has much stronger debugging and development capabilities than webstorm.
So get to the point
Let's use hbuilder to demonstrate the use of the environment
First we import the project from git
After the import is successful, it looks like this
In order to facilitate my future maintenance, please disconnect git by yourself after the import is successful
After becoming like this, this structure is the current initial file structure
public is a project that can be executed directly using the browser after compilation
routes is the routing code of node
That is, if you are a programmer of the node stack, you can directly develop the front and back ends.
If it is to provide services to other backends, then after the compilation is completed, you can use the release instructions to package and then take out all the file structures in the public, which is a set of front-end static projects that can run independently
Moreover, this tool can perfectly integrate other third-party plug-ins such as vue, has injected babel dependencies, and can use es6 for development globally, which will be demonstrated later
Then let's take a look at the package.json file which is the description and dependencies of this project
For java programmers, he is equivalent to maven's pom.xml file ( here I have to complain about java's maven if it can have 10% of npm's ability, maven's operation is convenient and Chengdu can be improved ten times, really compared to npm. too far )
Let's take a look at the contents of the package after complaining
There are two notes attached to this figure, that is, the project's startup instructions and release instructions.
But remember
No comments can be entered in package.json. Comments cannot be used in other configuration files. If they are used, an error will be reported during startup.
What we need to pay attention to here is the dependencies in the package. With this table, we can automatically install the dependencies. However, if you see this article after many years, some of the dependent packages may no longer be available, so you need to download them manually.
So the following is to open the shell command or cmd command to the root directory of your project and execute the npm install command to install dependencies
If it goes well, you will see the above content
After installing the dependencies, the project will have one more package
This node_modules contains all the dependencies of the project
As long as there are no problems in the above two steps, you can continue to execute the production environment running command npm start in the console, and then magical things will happen
At this point, your console will run desperately and give the corresponding progress
Knowing that webpack started successfully and a compilation report appeared below
At this time, it is more convenient that your browser will jump out by itself and open the welcome interface of the production environment.
Due to the lack of time, we can only temporarily deal with a welcome interface. In the following days, the author's avatar will be replaced as the cover.
After seeing this interface, the project structure has undergone a major change
The src directory appears and there are some files in it, and there are more files in public
The structure of this src is the structure we need to produce code, so this is the welcome interface,
If you are using it for the first time, you can change the content of the page at will
But don't move the hmr.js in the plugin folder. This is the core code to realize the hot update of the webpage, so if you move this, you need to refresh the webpage manually.
Otherwise, you only need to do operations in the html file, css and js file of src, and the web page will be automatically updated, which is a word for dual-screen developers.
Don't worry, it's not over yet
Introduce the access rules, the browser's path access rules refer to the welcome page
That is, the routing of node helps us turn, all html interfaces must be placed in the html folder
Just enter the file name of / web page after the ip port number (you can access it successfully without a suffix)
So the key step is that many people's projects will have multiple static pages. If they are using new ones, do they have to be created one by one?
Of course, since it is a tool, in this production environment I have added a file called page.config.js
After opening you will find there is only one empty {}
The way this file is used is to create a new page, which is inspired by the development of small programs
When creating a new page in WeChat's applet development, you only need to enter a new interface address in the configuration file, and multiple files will be automatically generated
Then the page.config.js here also implements this function. For example, if you do the following, you only need to add the interface name you need in the json format.
Then just press ctrl+s to save
Wait a second and you will find that something has changed in your project
It's not over yet, just change the suffix to test in the browser path and then visit
It can be used directly, and you only need to directly manipulate the code page and it will still refresh automatically.
Don't worry, let's look at other functions next
For example, the compatibility problem of css will automatically generate a prefix solution, and the es6 grammar of js will be automatically handed over to babel for conversion
Here again, a premise is emphasized. As a webpack user, the first thing that must be clear is that the file you use to write code is not the file accessed by the browser. If you are a java programmer, the principle is the same as that of jsp. You access The web page is not the jsp file you wrote. In this environment, src is where we write code, and the file in public is where our browser actually accesses and uses it later, so write the code in src , if you want to see what the code looks like after it is generated, go to the corresponding folder in public, such as the completed css and compiled js, here you need to understand the picture of the project welcome page, why you can use browsers such as ts cs and sass less on the front end Unrecognized language development is not because the browser is powerful, but they are actually converted into native html css js during the development process through webpack as shown in the figure
So you must at least understand webpack to use this tool proficiently
Then let's talk about it next if you want to publish the interface as a normal static page after the code is developed, you need to go back to the system console
Then use the npm run build command to package the project in the root directory of the project with the server stopped
No interface will pop up after run build, his role is
Remove the auxiliary functions and compressed code added to the project by webpack during development
When the code is compressed, you can directly take the asking price in the public folder as a whole. The files here are a set of fully developed static pages and can be run directly.
So far, the first version of the tool usage method has been introduced. If there are some problems in use, you need to check by yourself temporarily. I will update this github project from time to time in the future, which will make this environment more perfect. And it is convenient for the public to develop.
Finally, if you haven't successfully used this tool after reading this article once, then please read it again~~