写在前面
最近学习了一些关于webpack的知识，在此做一些纪录。
作为前端开发者，我们以前在浏览器中运行 JavaScript ，会引用一些脚本来存放每个功能；此解决方案很难扩展，因为加载太多脚本会导致网络瓶颈；亦或使用一个包含所有项目代码的大型 .js 文件，但是这会导致作用域、文件大小、可读性和可维护性方面的问题。
后来，模块化诞生……随之而来的是一个新的时代，基于 node.js 的一系列解决方案也是孕育而生，各种功能、方法都是用模块，对于开发、维护也是极大的瓶颈突破和效率提升，但是新的问题随之而来，各种模块不是浏览器支持不够友好，就是各依赖问题难以手动解决或者构建……而 webpack 此时也是破空而出，是用于现代 JavaScript 应用程序的静态模块打包工具。最核心的功能则是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个或多个 .js 文件。这个过程也被称为 模块打包 。
那么webpack到底神秘在何处？为何前端大框架都用它来配置？为何近年面试频频被问？上手难度几何？实际效果又如何？
本专题文章着手纪录webpack实战过程，从零开始着手webpack的配置过程及优化方案，例如模块打包、资源输入输出、预处理器、样式处理、代码切割、打包优化、开发环境调优 等等篇章。
本篇纪录关于webpack的简介以及环境配置、打包第一个应用~
webpack简介
webpack
1. 什么是webpack
webpack是一个开源的Javascript模块打包工具，最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件。
2. 为什么选择webpack
对比同类模块打包工具，具备以下优势：
- 支持多种模块标准，如AMD，CommonJS及ES6模块等
- 具有完备的代码分割功能，可以有效减小资源体积，提升首页渲染速度
- 可以处理各类型资源，如css、png等
- 拥有庞大的社区支持
安装
1. 环境
- 操作系统： 无要求
- 环境： Node.js
此处使用macOS或者windows为例。
2. Node.js安装
打开node.js中文网（http://nodejs.cn/），点击下载项安装对应系统的安装包即可。
3. webpack安装
-
新建一个目录作为工程目录
-
然后终端进入或者通过命令行工具执行npm初始化：
npm init -
依次输入所提示的的基本信息，完成后得到一个
package.json文件
webpack安装
-
执行安装webpack和webpack-cli
npm i webpack webpack-cli --save-dev -
执行完成好就完成了安装过程
打包第一个应用
hello world
接着刚才的步骤继续：
- 项目根目录建入口文件： index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my first webpack app</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
- 项目根目录新建文件夹
src，存放两个js文件：index.js和hello.js - index.js
// index.js
import hello from './hello.js';
document.write('my first webpack app <br/>');
hello();
- hello.js
// hello.js
export default function() {
document.write('hello world!');
}
- 命令行工具执行打包命令：
npx webpack --entry=./src/index.js --output-filename=bundle.js --mode=development
- 执行结果（和工程目录）如下：
第一次打包应用
- 验证结果：浏览器打开
index.html，查看页面结果：
结果
命令优化
在上述打包命令中，我们使用npx webpack --entry=./src/index.js --output-filename=bundle.js --mode=development来执行打包，但这一段命令冗长而又耗时，搞不好还容易出错。那么有没有简洁一些的方法呢？
当然有！
1. 使用 npm scripts 配置
配置
打开根目录的配置文件，编辑一条 scripts 命令：
{
"name": "w1",
"version": "1.0.0",
"description": "打包第一个应用",
"main": "index.js",
"author": "zxm",
"license": "ISC",
// 添加命令
"scripts": {
"build": "webpack --entry=./src/index.js --output-filename=bundle.js --mode=development"
}
}
scripts 是 npm 提供的脚本命令功能，在这里可以直接使用模块所添加的指令。
验证
我们修改hello.js中的输出：
// hello.js
export default function() {
document.write('hello scripts');
}
然后执行打包命令：npm run build，观察结果：
结果
2. 使用配置文件配置
从上面命令可以看出，我们使用 scripts 命令一样可以代替执行 webpack 的打包命令，并且在命令行工具中使用则会更加简洁。
但是存在一个问题，如果项目需要越来越多的配置，那么就需要往命令中塞入更多的参数，越来越多，到后期，项目的维护成本则正比的增加许多。为了解决此问题，可以将这些参数用对象的配置形式来统一存放到一个配置文件中，然后webpack每次打包都读取该配置文件即可。
- 根目录新建文件：
webpack.config.js，并配置如下代码：
// webpack.config.js
module.exports = {
// 入口文件指定
entry: './src/index.js',
// 输出资源配置
output: {
filename: 'bundle.js'
},
// 打包模式：develop-开发，production-生产
mode: 'development'
}
- 修改
package.json文件的scripts > build配置：
{
......
// 修改后如下：
"scripts": {
"build": "webpack"
}
}
- 校验：修改
hello.js的输出：
// hello.js
export default function() {
document.write(`this is webpack.config\'s result`);
}
- 执行
npm run build，刷新浏览器，看结果：
结果
至此，webpack的初始化环境配置及基础配置已经完毕。但是我们现在遇到一个麻烦事：我们没更改一些代码，则需要重新打包才能去测试，才能看到结果，那么有没有什么简洁的方案处理呢？有！继续操作~
3. 开发优化——热更新
webpack社区为我们提供了一个便捷的本地开发工具：webpack-dev-server，
安装
执行安装命令：
npm i webpack-dev-server --save-dev
新增 npm scripts 命令
前面刚写了一个scripts命令，那么此时再添加一个dev来配置。编辑根目录的package.json文件：
{
......
"scripts": {
"build": "webpack --entry=./src/index.js --output-filename=bundle.js --mode=development",
"dev": "webpack-dev-server"
}
}
还没结束，仍需在webpack中配置一下：
webpack.config.js添加dev-server配置
module.exports = {
......
// 新增： dev-server配置
devServer: {
publicPath: '/dist'
}
}
启动本地服务
执行命令npm run dev
执行结果
可以看到，在左侧代码块中修改内容后，只需要保存即可，右边浏览器则自动刷新了~~
这个功能可以脱离dist文件，也就是没有通过实际的打包，为什么会这样呢？
因为webpack-dev-serve其实不会写入实际的bundle.js文件，而是将打包结果运行于内存之中，然后每次webpack-dev-serve接收到请求的时候都将此时内存中的打包结果返回给浏览器端即可。
备注：如果npm run dev启动失败，有可能是webpack webpack-cli webpack-dev-server 的班班之间存在不兼容现象，将这三个卸载后(用 npm uninstall 卸载)，同时将这三个安装一下即可：npm install webpack webpack-cli webpack-dev-serve
小结
本篇文章中，对webpack有了一个基本的介绍： 处理模块之间的依赖并将其打包然后进行了webpack环境的安装和配置：环境、nodeJs、webpack及webpack-cli等。
之后，开始了第一个案例： hello world，然后通过webpack命令进行打包，打包到./dist/bundle.js。
最后进行了一波优化，由于直接输入命令过于繁琐，因此借助 npm 脚本或者 webpack.config 来维护 webpack 命令。此时由于频繁的打包也不符合开发条件，因此使用本地服务 webpack-dev-server 来启用一个可热加载的本地服务来处理打包资源和静态文件的请求。
下一篇将会纪录如何编写和使用模块，以及模块打包。敬请期待~
本篇代码demo存于公众号【流眸】，欢迎扫码关注公众号，可在公众号下回复【2073】获取
公众号【流眸】
网友评论