Examples of file directory:
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack01</title>
</head>
<body>
<P> original page </ p>
<script src="js/index.js" type="module"></script>
</body>
</html>
index.js：
import {createContent} from "./content.js"
import {createHeader} from "./header.js"
import {createSilder} from "./silder.js"
let root = document.querySelector("body");
createHeader(root)
createSilder(root)
createContent(root)
header.js
export function createHeader(root){
let elHeader = document.createElement("h3");
elHeader.innerText = "page header content";
root.appendChild(elHeader)
}
silder.js
export function createSilder(root){
let elSilder = document.createElement("div");
elSilder.innerText = "sidebar, page 1";
root.appendChild(elSilder)
}
content.js
export function createContent(root){
let elContent = document.createElement("div");
elContent.innerText = "Web Content ti";
root.appendChild(elContent)
}
Command line statement npx webpack js / index.js
Last Modified index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack01</title>
</head>
<body>
<P> original page </ p>
<script src="dist/main.js" type="module"></script>
</body>
</html>
Simple packaging is complete.
If at this time to amend silder.js contents of the file, the page will not be modified.
Again command line input npx webpack js / index.js. Pages modified successfully updated to the new version.
New webpack.config.js (profile) in the root directory
let path = require("path");
// es5 wording, equivalent import
module.exports={
entry:"./js/index.js",
output:{
filename:"aaa.js",
path:path.resolve(__dirname,"bunble")
}
}
Modify the path in the index.html page to write a new path
Command line npx webpack
