Webpack basics--installation tutorial

1. Create the webpack-first folder as the site, create the app folder to store the original js modules (main.js and Greeter.js), and create a public folder to store index.html and the packaged bundle. .js file

1. Find the directory of your project
　npm install -g webpack //Globally install webpack

2. Initialize package.json file
npm init
3. Install under the site Webpack establishes dependencies
npm install --save-dev webpack
4. Write the Greeter.js file

module. exports=function(){
　var greet = document.createElement("div");
greet.textContent = "Hi there and greetings";
return greet;
　}

//module.exports uses the function as a return value and becomes a shared module, which can be used as long as the Greeter file is introduced

5. Write the main.js file

var greeter = require("./Greeter.js?1.1.11");
document.getElementById("root").appendChild(greeter());

/ /Introduce require()----Greeter.js module
//Get the html-dom element and put the return value of the called method in the dom element

6. Execute the command Packaging,

webpack app/main.js public/bundle.js

//After installing webpack globally, you can write like this, app/main.js is the main entrance The file public/bundle.js packages the files in this namespace into public, that is, in the same directory as html.


html file code:

//What is called is the packaged bundle file

2.

If there are many modules like the above method, it will be very inconvenient. Then we need to execute the entry file and export the packaging directory every time, which is easy to make mistakes. . Is there any simple way for us to execute a word every time we package? Or is it simpler? Here is the method:

Define a configuration file. This configuration file is actually a simple one. JavaScript module, you can put all the information related to the build inside.

Let’s continue the above example to illustrate how to write this configuration file. Create a new file named in the root directory of the current practice folder. webpack.config.js file, and make the simplest configuration in it, as shown below, it Contains the entry file path and the location where the packaged file is stored

##The path of the party.

1. Configure it like this under webpack.config.js

module.exports = {

entry : __dirname + "/app/main.js?1.1.11",//The only entry file that has been mentioned many times

Output: {

Path: __dirname + "/public" ,//The place where the packaged files are stored

　filename: "bundle.js?1.1.11"//The file name of the packaged output file

　}

　}

Note: "__dirname" is a global variable in node.js, which points to the directory where the currently executing script is located. (If the configuration file is under app, then point to the app folder)

The above is the detailed content of Webpack basics--installation tutorial. For more information, please follow other related articles on the PHP Chinese website!