本文介绍了webpack的基本概念，解释了它作为前端项目自动化构建工具的作用。接着，通过一个webpack4.35.0的开发入门案例，展示了从安装到创建bundle文件的完整流程，包括配置文件的使用和NPM脚本的设置，帮助读者理解webpack如何管理和优化项目中的静态资源。
webpack概念引入
初学webpack，我们应该会有一个疑惑，就是自动化构建工具是基于什么情况产生的，能帮我们在开发工程中带来怎样的便利。下面我们就来解答下这种疑惑。
首先，我们来想想网页中会引用哪些常见的静态资源？无非就是以下几类。
- js
- css
- image
- 字体文件
- 模板文件
但是随着项目的庞大，引入的这些资源也会增多，这些静态资源的增多，就会产生以下几个问题了。
- 网页加载速度慢，因为要发起更多的二次请求；
- 要处理错综复杂的依赖关系，也就是说依赖增多
出现问题了，自然需要想方设法去解决问题，那么怎么解决上面两个问题呢？
- 合并、压缩、精灵图、图片的Base64编码
- webpack就可以解决各种包之间的依赖关系，es6模块化出现之前可以使用requireJS。
webpack又是什么呢？它是前端的一个项目自动化构建工具，它是基于Node.js开发出来的一个前端工具。
当然webpack并不只可以解决包之间复杂依赖关系，也可以进行合并、压缩、混淆等处理。也就是说能够同时解决以上两种问题，还有一种Gulp工具也可以解决以上两种问题。
webpack（版本为4.35.0）开发入门案例
1.安装
首先新建一个项目目录，初始化创建package.json文件（这里就需要你已经安装npm了）后，局部安装webpack（官方建议局部安装，这样在引入破坏式变更依赖时项目能独立升级不对其它项目webpack版本造成影响）
mkdir webpack-demo
cd webpack-demo
npm init
npm install webpack ---save-dev
npm install webpack-cli --save-dev
接下来创建以下目录结构、文件以及文件内容。
project
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>
此时，还需要去调整package.json文件，将安装包私有化以及删除main入口，这可以防止意外发布代码。
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
+ "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {}
}
在这个例子中，
- 无法立即体现，脚本的执行依赖于外部扩展库(external library)。
- 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
- 如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。
因此，为了避免这些问题可以使用webpack代替管理这些脚本。
创建一个Bundle文件
调整下之前的目录结构，源代码放进/src目录下，经过构建后生成的最小化、最优化的代码放进/dist目录，最终在浏览器中加载。
project
//行首的+表示新添加的 -表示删去的
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
要在 index.js 中添加 lodash 依赖，我们需要在本地安装 library：
npm install --save lodash
安装好了之后，就可以进行导入了。
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
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
注意：-代表删去
现在，由于通过打包来合成脚本，我们必须更新 index.html 文件。因为现在是通过 import 引入 lodash，所以将 lodash
<!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>
+ <script src="main.js"></script>
</body>
</html>
在这个设置中，index.js 显式要求引入的 lodash 必须存在，然后将它绑定为 _（没有全局作用域污染）。通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的，会以正确顺序执行的 bundle。
最后通过执行npx webpack,将我们的脚本作为入口起点，然后 输出 为 main.js.
npx webpack
Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 3003ms
Built at: 2018-2-26 22:42:11
Asset Size Chunks Chunk Names
main.js 69.6 KiB 0 [emitted] main
Entrypoint main = main.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 256 bytes {0} [built]
+ 1 hidden module
WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 选项还未设置。将 'mode' 选项设置为 'development' 或 'production'，来启用环境默认值。)
在浏览器中打开 index.html，如果一切访问都正常，你应该能看到以下文本：‘Hello webpack’。
使用一个配置文件
在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件：
prioject
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
现在，让我们通过新配置文件再次执行构建：
npx webpack --config webpack.config.js
Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 328ms
Built at: 2018-2-26 22:47:43
Asset Size Chunks Chunk Names
bundle.js 69.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 256 bytes {0} [built]
+ 1 hidden module
WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 选项还未设置。将 'mode' 选项设置为 'development' 或 'production'，来启用环境默认值。)
注意，当在 windows 中通过调用路径去调用 webpack 时，必须使用反斜线()。例如 node_modules.bin\webpack --config webpack.config.js。
比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options)，以及许多其他增强功能。
NPM 脚本(NPM Scripts)
考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。注意，使用 npm 的 scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm 包。
npm run build
Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 323ms
Built at: 2018-2-26 22:50:25
Asset Size Chunks Chunk Names
bundle.js 69.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 256 bytes {0} [built]
+ 1 hidden module
WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 选项还未设置。将 'mode' 选项设置为 'development' 或 'production'，来启用环境默认值。)
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build – --colors。
结语
完成以上操作，就实现了一个基本的构建过程，如果还需要了解如何通过 webpack 来管理资源，例如图片、字体，可以查看另一篇webpack之管理资源。此刻你的项目应该和如下类似：
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules
如果使用的是 npm 5，还会在目录中看到一个 package-lock.json 文件。
扫一扫
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
