1.新手上路-灵析社区

懒人学前端

一、前言

现在 Vue.js、React 库及生态组成的框架，在脚手架搭建的过程中一些 Webpack ( Vue.js 3.0 开始使用 Vite ) 配置都已经内置，因此我们对 Webpack 的使用，常常停留在配置出入口、应用 Loader、插件等，很少深入配置和工具的原理。

虽然网上相关的文章比较多，但过于碎片化，读者难以形成系统的知识框架。

本书会带着你从零开始探索 Webpack 核心概念，从配置、优化到深入原理，系统性地认识 Webpack。

本测一共包含四块内容：新手上路、核心概念、 Webpack 环境配置、优化（只包含两块）。功能偏基础更适合一些新手小白学习，如果是有一些 Webpack 经验的也可以看下核心部分，这些部分除了一些配置用法外，还会穿插原理性概念。

二、Hello World

webpack简介

简介

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

webpack的核心概念为以下模块，后续会对以下概念针对性输出文章。

  • 入口（entry）
  • 输出（output）
  • loader
  • 插件（plugin）

安装

webpack 对操作系统没有要求，使用 Windows、Mac、Linux 操作系统均可，它唯一的依赖是 Node.js，所以使用 webpack 前需要先安装 Node.js，安装地址为 [Nodejs]](http://nodejs.cn/download/) 推荐安装TLS（长期维护）版本。node 安装完成后，在命令行输入 node -v，可显示版本号即安装成功。

接下来，我们需要使用 Node.js 的包管理器 npm 来安装 webpack ，安装模块的方式有两种：一种是全局安装，一种是本地安装，此处我们选择本地安装，主要有以下两点原因：

  1. 如果采用全局安装，那在与他人协作时，由于每个人的 webpack 版本不同，可能导致打包出的内容不一致
  2. 通常会通过运行一个或多个 npm scripts 以在本地 node_modules 目录中查找安装的 webpack，来运行 webpack，所以在这种情况下可能导致本地全局都有，容易造成混淆
"scripts": {
    "build": "webpack"
}

基于以上两点，我们选择在项目内安装，首先新建一个工程目录，并执行 npm 的初始化命令

 mkdir webpack_init && cd webpack_init
 npm init

命令行输入项目的基本信息，如：名称、版本、描述、仓库地址等信息。成功后工程目录中会出现一个 package.json 文件。

接下来输入安装webpack的命令：

 npm install webpack webpack-cli --save-dev

webpack v4+ 版本都需要手动安装 webpack-cli，webpack-cli 提供了许多命令用于在命令行中运行 webpack。具体包含命令可查看文档[webpack-cli]](https://webpack.docschina.org/api/cli/) 检查安装是否成功执行 webpack -v ， webpack-cli -v ，显示对应版本则安装成功

打包第一个应用

在 webpack_init 文件夹下添加 index.html、src 文件夹下添加 index.js、hello.js 文件

index.html

<!doctype html>
<html>
  <head>
    <title>demo</title>
  </head>
  <body>
    <script src="./dist/main.js"></script>
  </body>
</html>

src/index.js

import helloWorld from './hello.js';

function component() {
  const element = document.createElement('div'); 
  element.innerHTML = helloWorld();
  return element;
}

document.body.appendChild(component());

src/hello.js

export default function() {
    return 'hello world!!!'
}

在控制台输入打包命令 npx webpack，

npx webpack

因为 npm 会从全局模块中找 webpack ，但是我并非全局安装，而是项目本地安装，所以报错。所以需要 npx 命令运行命令。npx 会先找当前目录下的 node_modules/.bin 目录下的二进制可执行文件，如果当前目录下没有 npx 会在 PATH 目录下继续寻找，如果没有会自动下载安装 webpack。此时，第一步手动安装 npm install webpack --save-dev 可省略。执行命令成功后会在项目中增加一个 dist 文件，文件中有一个打包后的 main.js 文件。

此时我们在浏览器中打开 index.html 文件，在页面中看到 hello world!!!

在上面的命令中，我们采用了 webpack 的默认设置，我们也可以在命令行中指定入口文件、输出文件、打包模式等信息

npx webpack --entry=./src/index.js --output-filename=bundle.js --mode=development

删除 webpack 默认配置打包的内容，重新执行带配置的命令，打包后在 dist 目录下生成了 bundle.js 文件，将 index.html 中引入 js 文件地址 main.js 改为 bundle.js，在浏览器打开 index.html 发现控制台再一次输出了 hello world!!!。

使用 npm scripts

从上面的命令行配置打包例子来看，每次打包都需要在命令行输入冗长的命令，这样做会很耗时和容易出错，为了使命令更加简洁，可以在 package.json 文件中的"scripts"对象下添加一个打包命令脚本 build。

scripts 是 npm 提供的脚本命令功能，所以在这里我们可以直接使用 webpack 命令取代之前的 npx webpack。

"scripts": {
  "build": "webpack"
}

在控制台输入npm命令，打包成功

npm run build

使用配置文件

在 webpack4 中，可以无需配置采用默认方式打包，直接在控制台输入 npx webpack 即可打包，然后大多数项目需要很复杂的设置，如项目分包、压缩、懒加载等，所以大多数情况下还是需要一个配置文件，webpack 默认加载的配置文件为 webpack.config.js，也可以指定 webpack 配置文件，需要命令行指定。

webpack.config.js

在项目 webpack_init 中新建一个 webpack.config.js 文件

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

上面通过 module.exports 导出了一个对象，将之前命令行中输入的 key-value 形式的参数放在这个对象中。

这个对象包含连个属性，entry 为项目入口文件，output 为打包出口文件，其中 filename 为打包文件名称，path 为文件打包路径。通过调用 node.js 的path模块，将 __dirname(node.js内置全局变量，__dirname 为当前文件所在目录的绝对路径)与输出路径连接起来，得到了最终资源输出路径。

现在我们去掉 package.json 中 build 后面的参数去掉，只保留 "build": "webpack"，然后在控制台输入 npm run build，打包成功了

使用不同的配置文件

出于某种原因，需要根据特定情况使用不同的配置文件，则可以通过在命令行中使用 --config 标志修改

删除项目中的 webpack-config.js，新建一个 webpack-config-dev.js，内容和 webpack-config.js 一致。在命令行输入npm run build --config webpack.config.dev.js 或者在 package.json 的 scripts 中增加配置

  "scripts": {
    "build": "webpack --config webpack.config.dev.js"
  },

执行打包命令后。打包结果如下

总结

在上面我们介绍了

  • webpack 的作用及包含核心模块
  • 如何从零安装一个 webpack 运行环境
  • 打包第一个 webpack 项目
  • 告别命令行，通过配置文件打包 webpack

阅读量：2006

点赞量：0

收藏量:0