webpack 用于编译 JavaScript 模块，运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)。
命令行：
npm install webpack webpack-cli --save-dev
webpack-cli 的作用：用于在命令行中运行 webpack
SAP Spartacus 的 devDependencies 中就包含该依赖。
0
创建一个新项目：
0
index.js 的源代码：
function component() {
const element = document.createElement('div');
// lodash（目前通过一个 script 引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html 源代码：
<meta charset="utf-8">
<title>起步</title>
package.json 源代码：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
- "main": "index.js",
+ "private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
}
}
private:true 让这个包私有化，可以避免误发布代码。
上述代码有一个隐含的问题，在 index.js 里使用了变量 _, 该变量通过 index.html 的 script 标签导入lodash@4.17.20 ，但是 index.js 并未显式声明它需要这个变量。
使用这种方式去管理 JavaScript 项目会有一些问题：
-
无法直接体现，脚本的执行依赖于外部库。
-
如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
-
如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。
我们可以使用 webpack 来避免上述三个问题。
首先，把 index.html 放到 dist 文件夹内。
0
本地安装 lodash：
npm install --save lodash
在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 npm install --save。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 npm install --save-dev
修改 index.js, 显式引入 _:
0
现在我们可以在 index.html 里将导入 lodash 的 script 删除，因为我们已经在 index.js 里通过 import，显式导入了：
0
执行 npx webpack，会将我们的脚本 src/index.js 作为 入口起点，也会自动生成 dist/main.js 文件作为 输出。
Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）：
0
至此这个最简单的 webpack 例子就完成了。
网友评论