明确webpack的实现原理，不掺杂其他的脚手架之类的东西会更直白，更有力。
1.新建一个目录，通过 npm init 初始化一个项目，这个时候仅生成一个package.json 文件，如下：
从图中的描述可以很明确的描述：This utility will walk you through creating a package.json file. 这一步骤引导创建一个 package.json 文件。有时候匆忙走过的路，偶尔停下来歇歇脚，看一看，兴许也会有令人愉快的发现。
根据引导提示，完善包名、版本、描述、入口文件等信息，也可以直接回车跳过，暂时不填。完成之后项目根目录下有且仅由一个package.json文件。内容如下：
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "askcomputer",
"license": "ISC"
}
2.添加能够基于浏览器展示的基础 index.html 文件。
小TIPS：介绍一个vscode下添加html内容的快捷方式：输入感叹号后弹出右侧的Emet Abbreviation，然后直接回车，如下：
index.html的内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
3.基于前面文章 关于CommonJS，聊一聊你可能不知道的内容 在CommonJS 模块规范的 基础上创建 入口文件和组件模块，如下：
①main.js
const init=require('./components/index.js')
init('问问计算机：webpack是怎么回事？');
②init.js
function init(content)
{
window.document.getElementById('app').innerHTML= content;
}
module.exports=init;
文件分配的路径如下：
这里的文件路径是根据工程本身的条件自己定义的，它并不是固定的。但是关键问题是 webpack.config.js 和 package.json 中的配置要对应上，如下：
③webpack.config.js
const path=require('path');
module.exports={
entry:'./main.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'../dist')
}
}
这里的 ../dist 是指相当于当前 webpack.config.js 路径的上一级相对路径下的 dist 文件夹，如果这里使用 ./dist 的情况下，就会在当前的 component 文件夹在 npm run build 步骤执行后生成 component/dist 的路径。如果这样会导致 步骤2 中找不到 dist 文件夹。所以这里要灵活掌握。
④package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "webpack原理",
"main": "main.js",
"scripts": {
"build": "webpack --progress --config ./config/webpack.config.js"
},
"author": "askcomputer",
"license": "ISC",
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
其中的 build 属性只是针对 运行 npm run 命令后的一个参数名称。具体原理参考 之前的文章 npm run dev 后 webpack-dev-server 做了哪些事情 。
在上述步骤完成之后，在当前工程的根目录下打开终端，运行 npm run build 就能基于 webpack 生成 上述步骤 ③ 中配置的 output 属性下的 filename 对应的文件，如下：
⑤浏览器打开 index.html 后就能够得到如下结果：
下一篇文章详细描述 webpack 生成 bundle.js 的详细过程。开启深入理解 webpack 原理的征途。