webpack 学习笔记：使用 lodash
0 / 0 / 创建于 4年前 /
zhangbao 的个人博客
本篇从头开始，介绍在 webpack 中打包引入 lodash 的用法。
首先，创建项目：
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev这里没有全局安装 webpack，而是安装在本地。后续，通过
npx webapck/ npm scripts 的形式即能调用。
项目结构：
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js传统方式的弊端
src/index.js
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>上面这种是传统的组织代码的方式，有几个明显的弊端：
- 依赖关系不清晰
- 依赖丢失，或者加载顺序不对，也会导致代码运行时报错。
- 如果依赖没有使用，浏览器就白白浪费了加载依赖库（即这里的 lodash）所消耗的带宽资源
这就是为什么会需要像 webpack 这样的打包工具出现的原因。
接下来，我们重新调整项目结构，使用 webpack 来打包项目功能。
使用 webpack 打包
首先调整下项目结构，
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.jsindex.html 文件被转移到了 dist/ 目录之下，dist 是 distribution（发布） 的意思（src/ 则是 source（源代码）的意思）。
然后安装依赖 lodash。
npm install -save lodashnpm install 时，生产依赖（会打包到最终包中的）使用 –save 标记，开发依赖（不会打包到最终包里的）使用 –save-dev 标记。
现在修改 src/index.js 文件：
+ import _ from 'lodash';
+
function component() {
const element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());现在可以移除 dist/index.html 中的 lodash 依赖了。执行 npx webpack 指令，就能在 dist/ 下看到生成的 main.js 打包文件了。
npx webapck
...
Asset Size Chunks Chunk Names
main.js 72.3 KiB 0 [emitted] main
...webapck 是配置驱动的，虽然在执行 npx webapck 的时候，没有显式指定配置文件，webpack 会使用默认的一套配置来生成我们的打包结果。如你所见，默认入口文件是 src/index.js，打包出的文件在 dist/main.js。
接下来我们把配置文件加上。
添加配置文件
在项目根目录下创建 webpack.config.js
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.jswebpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};现在重新使用配置文件打包下：
npx webpack --config webpack.config.js
...
Asset Size Chunks Chunk Names
main.js 72.3 KiB 0 [emitted] main
...一样的结果。
其实这里的 –config webpack.config.js 是多余的，因为执行 webpack 指令时，默认就会查找项目根目录下的 webpack.config.js 文件，没有的话，再使用默认配置信息。
npm script
当然，我们还可以在 package.json 中，以 npm scripts 的形式注册 webpack 打包指令：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.5"
}
}之后，直接执行 npm run build 指令也可以了。随着后续指令数的增加，更方便管理。
细心的话，会看到教程里的打包文件体积很大（72.3 KiB），这是因为最终打包代码中包含了 lodash 库的所有代码——这是完全不必要的。
我们可以通过只引入 join 方法的形式，避免这个弊端：
import join from 'lodash/join';
function component() {
const element = document.createElement('div');
element.innerHTML = join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());再次打包，
npm run build
...
Asset Size Chunks Chunk Names
main.js 1.17 KiB 0 [emitted] main
...可以看到，最终的打包体积锐减到 1.17 KB 了。
参考链接：webpack.js.org/guides/getting-star...
（完）
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号