webpack 用于编译 javascript
模块, 可以把文件格式编译成我们想要的静态文件格式, 但是处理的过程并不是全部由 webpack
本身完成, webpack
只是提供了一个打包机制, 对于各类文件的打包处理需要使用相对应的 预处理模块 loader
来处理, 作为一种机制 webpack
会帮助各种 loader
提供识别入口目录、入口文件、 输出目录, 输出文件。
首先我们试着打包一个只包含 console.log('hello world')
的 js
文件。
初始化文件和安装 webpack
环境
# 新建 demo 目录
mkdir webpack-demo cd webpack-demo
# 初始化目录
npm init -y
# 本地安装 webpack 工具
npm install webpack webpacl-cli --save-dev
# webpack 默认的入口文件是 .src/index.js 创建 src 目录和 index.js 文件
mkdir src
echo “console.log('hello world')” > src/index.js
# 执行 webpack 命令 需要查看打包后文件, 这里使用 development 模式
npx webpack --mode development
简化打包后文件
由于打包后的文件比较繁琐, 这里我们简化一下打包后的文件
(function(modules) {
var installedModules = {}
function __webpack_require__(moduleIid) {
}
return __webpack_require__(__webpack_require__.s = "./src/index.js")
})({
"./src/index.js": (function(module, exports) {
eval("console.log('test webpack entry')");
})
})
打包后的文件含有大量的注释和
webpack
本身的变量, 为了方便分析可以把这些注释和 类似__webpack_require__.s
的复制语句全部删掉
从上面的代码可以看到,
- 经过
webpack
打包后的代码通过一个IIFE
自执行函数ÿ