For the front-end position, modular development is a must-go process, and the use of packaging tools is essential. Next, I will talk about the usage of webpack packaging tools. It is very simple. Learn it, and you will get started with webpack. .
What do you need to prepare before using webpack?
- install node
- Taobao mirror cnpm (preferably)
- Install webpack
If you already have the first two steps, then you can jump directly to the third step, install the webpack command line as follows:
1. Install webpack globally
cnpm install -g [email protected]
Here you can specify the version to install or not, but the latest version of webpack may be problematic, so if you install the latest version, be prepared for the project not to run (I encountered it, sad)
2. Create an empty file, and enter it, and install the dependencies of the project runtime locally (if you have installed git, you can directly right-click => git bash here If not, you can enter with win+r => cmd command line), then local installation
cnpm install --save-dev [email protected]
3. After all the dependencies are downloaded, create a package.json file. After the creation is complete, if your package.json folder does not have many dependencies, and there are only a dozen short lines in total, then start from the second step. do it all over again
cnpm init
4. If you don't know what went wrong in the next steps, and you can't solve it, you can delete webpack and start over again, otherwise you will have a headache
npm uninstall webpack -g (global uninstall)
5. After the local installation is complete, you can type the code. First, create two folders under the empty file, one to store the source code and one to store the code read by the browser. There are many ways to create them, but they are a little taller. , you can use the git command
mkdir app //Store source code
mkdir public //Store the files read by the browser
Then specify two files in the app folder, one is Greeter.js, the other is main.js (used as the entry file), and the index.html file is specified in the public folder, and the entire structure tree is as follows:
Among them, bundle.js is the name of our compiled file, which is explained later
Among them, the file content of index.html is as follows:
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title ></ title > </ head > < body > < div id = "root" ></ div > < script src ="bundle.js" ></ script > //Directly import the name of the file to be compiled next </ body > </ html >
The content of the Greeter.js file is as follows:
module.exports = function () {
var greet = document.createElement("div");
greet.textContent = "Hello Webpack";
return greet;
}
The content of main.js file is as follows:
const greeter = require("./Greeter.js");
document.querySelector("#root").appendChild(greeter());
In fact, at this step, you can package the application directly in the console, through webpack "entry file path" "compiled file path" (the actual compilation quotes are not included, but this method is prone to errors), the most widely used The packaging method is webpack packaging, the steps are as follows:
6. Create a webpack.json.js file in the root directory of the project with the following contents:
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
Among them, there is a big pit for beginners, I hope you don't do it, that is, "__dirname" is two underscores, not one, hey, so sad, among them, entry is the specified entry file path, __dirname is A variable of node.js, pointing to the current directory; output is the place where the packaged file is stored and the name of the generated compiled file, then it can be printed directly on the console, if it is similar to the following, That means success
Then you can open the index.html file in the same way as usual,
Thanks to the contributors to both articles, thank you