明确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
br
②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 原理的征途。