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:

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