webpack实战——打包第一个应用

2020-07-03 本文已影响0人流眸Tel

写在前面

最近学习了一些关于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】获取

公众号【流眸】