Writing in the front
Some people may see this title will want to ask why directly from two cross to four, the reason is very simple because three write the comparison of the second take hands.
Can stay in folder only, for later oneself local looked up.
Webpack
There is no doubt that Webpack has a unique importance in the front end and is a skill point you must be familiar with.
Because when you send in your resume and browse through some of the front end positions at big companies, you will no doubt state that you need to be at least familiar with Webpack.
Being on the back end, it’s also nice to understand a little bit more about the front end.
What is a webpack
Webpack is currently the most popular front-end resource modular management and packaging tool.
Webpack provides a modular approach to development that front-end development lacks, treating various static resources as modules and generating optimized code from them.
Webpack can set functions from the terminal, or by changing webpack.config.js.
Webpack can package many loosely coupled modules according to dependencies and rules into front-end resources suitable for production deployment.
You can also code separate modules that are loaded on demand and load them asynchronously when they are actually needed.
Through loader conversion, any form of resources can be used as modules, such as CommonsJS, AMD, ES6, CSS, JSON, CoffeeScript, LESS, etc.
For example, if you’re developing with Vue, Es6 is hard to get around, and some browsers are stuck with Es5, webPack is a must.
The following paragraphs are taken from the article to help you quickly understand what webpack is
If you go to a restaurant and order food, you feel more comfortable taking it home to your dorm room.
You order a lot of dishes, spicy, sour, sweet, fruit, small cakes in different flavors.
Consider that some of your roommates like spicy food, some like sweet food, and some like fruit.
If all the dishes are mixed together and your roommates may not like it, you decide not to mix them together, but to mix them according to taste.
Mix up the spicy dishes, mix up the sweet dishes, mix up the fruit. So your roommate can accept it.
It can be said as follows:
Webpack analyzes the structure of large projects, that is, what flavors these dishes are;
Find the modules that won’t run directly in the browser. That is, analyze which tastes your roommate won’t accept.
Convert and package files that the browser can’t handle directly into appropriate formats for the browser to handle, and package dishes that your roommates can accept.
Combined with the above figure, you should have a clear idea of the running flow of Webpack.
Webpack workflow
The picture is also taken from the article above
Webpack use
Webpack is not hard to use, and it would be a bit of a shame if even a packaging tool had difficulty getting started.
Before using it we can create a new empty project and switch to this path on the command line.
Use the NPM insatll webpack -d command to install webpack locally into your project.
Then we need to install a webpack-cli, NPM install webpack-cli -d.
You can run CMD as an administrator and use the -g parameter to install the CMD and CMD respectively to the local administrator working directory.
However, this approach can cause some versioning problems, and it can lock up the version of Webpack, causing some unnecessary trouble.
Once installed, we open the folder in ide mode
Create a modules folder and create test.js and main.js in that folder
Once you’re done, you’re ready to write the webPack configuration file, which must be named webpack.config.js.
module.exports = {
// Select the entry file
entry: './modules/main.js'.// Output position
output: {
// A new js directory will be created under the current folder, where the packaged file will be named bundle.js
filename: "./js/bundle.js"}}Copy the codeAfter writing the configuration file, we can use the Terminal provided by IDEA to directly enter the webpack command.
If an exception occurs or you are using another INTEGRATED development environment, you can go to the project path on the command line and use webpack to package the command.
After executing the package command, wait a few seconds to refresh a dist directory in the project structure.
This directory holds bundled bundle.js
Let’s test the bundle.js package by creating a new index.html file in the project.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<! -- import bundle.js-->
<h1><script src="dist/js/bundle.js"></script></h1>
</body>
</html>
Copy the codeOpen the file in a browser:
No problem, the functions we wrote in test.js were introduced into main.js and packaged into bundle.js.
By importing bundle.js directly, we can retrieve the contents of the first two JavaScript files.
This is what WebPack does, and the Es6 code we wrote in these two JavaScript files will also be converted by WebPack into Es5 code.
In addition towebpackPackage command, and another package command that might be usedwebpack --watch.
With this command, WebPack listens to your project and repackages it if the files in your project change.
What you do with the Js file will affect the final package.
After making changes to the file, press CTRL + C to stop listening and type Y to start packing.
