Webpack入门

2021-03-03 分类：网站建设

由于 JavaScript 应用程序的复杂性不断增加，构建工具已成为 web 开发中不可或缺的一部分。Bundlers 允许我们去打包、编译和管理现代 web 项目需要的众多资源文件和依赖库。

在本教程中，我们将了解 webpack，一个强大的开源打包和预处理器，可以处理大量复杂多样的任务。我们将向您展示如何去编写 modules， bundle 代码和使用一些 loader 插件。本教程为 webpack 初学者设计的，要求有一些 JavaScript 基础。

为什么选择 Webpack？

就像 web 开发的其它方面一样，构建工具的也没有一个标准。现在开发者可以在 Webpack、Gulp、Bowserify、NPM scripts、Grunt 等类似的十余种构建工具。所有这些工具在在底层实现有所不同，但总体还是非常相似的，所以大多数时候你可以根据个人喜好和开发的项目，来选择合适的构建工具。

你可以通过以下优缺点，来判断 webpack 是否合适：

优点：

可以很好的用于单页应用
同时支持 require() 和 import 模块语法
允许非常前沿的 code splitting 特性
热加载可以让 React、Vue.js 和其它类似框架的本地开发更快
它是《2016 JavaScript 调查》中最受欢迎的构建工具

缺点：

不适合 web 开发的初学者
对于 CSS、图片和其它非 JS 资源文件时，需要先混淆处理
文档可以再优化
变化很大，甚至 2016 年的教程都已经算过时了

1. 安装

安装 webpack 最简单的方式是通过包管理器。我们将使用 npm 你也随意使用 Yarn 或其它熟悉的替代。不管是 npm 还是 Yarn，你都需要现有一个带 Node.js 的运行环境和 package.json 文件再继续。

推荐局部安装（不带 -g 标签），确保每个人运行你的项目时都是一样的 webpack 版本。

npm install webpack --save-dev

一旦我们安装完，最好通过 Node.js 脚本来运行 webpack，可以在添加以下代码到你的 package.json：

//...
 "scripts": {
 "build": "webpack -p",
 "watch": "webpack --watch"
 },
//...

现在我们可以通过在命令行输入 npm run build 来让 webpack 打包我们的文件（-p 选项可以压缩生产环境下打包后的代码）。运行 npm run watch 将启动一个进程，当检测到文件更改时，会自动打包我们的文件。

设置的最后一部分是告诉 webpack 要打包哪些文件，推荐新创建一个配置文件。

2. Webpack 配置文件

在这我们看一下配置文件最基础的写法，不要被误导 - webpack 配置文件非常强大，在不同的项目中变化很大，在某些情况下会变得非常复杂。

在你项目的根目录下新增一个名为 webpack.config.js 的文件。

webpack.config.js

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

entry 选项告诉webpack哪个是我们 Javascript 主文件。配置 entry 有许多不同的策略，但在大多数情况一个入口就足够了。

在 output 中我们指定打包的名称和路径。在 webpack 运行完后我们将把所有 JavaScript 放在一个名为 bundle.js 的文件中，这个唯一的 script 文件可以链接在我们的 HTML 文件：

<script src="./dist/bundle.js"></script>

这个设置足以让我们开始，稍后我们会向其添加更多的内容，但首先让我们先来看看模块是如何工作的。

3. Webpack 模块

Webpack 提供了多种使用模块的方法，大多数时候你可以选择一个你喜欢的。在这个教程中我们会使用到 ES6 的 import 语法。

我们想要添加一个模块来迎接我们的用户，我们创建一个名为 greeter.js 文件，将它导出为一个简单的函数

greeter.js

function greet() {
 console.log('Have a great day!');
};
//在此我向大家推荐一个前端全栈开发交流圈：582735936 突破技术瓶颈，提升思维能力
export default greet;

为了使用这个模块，我们必须引入它并在 entry 中调用它，你可以在 index.js 中看到配置文件。

index.js

import greet from './greeter.js';
console.log("I'm the entry point");
greet();

当我们 npm run build 运行打包时，在浏览器中打开我们的 HTML 可以看到：

在我们的 entry 和 greeter 模块已经编译成一个名为 bundle.js 的文件，且已经在浏览器生效。这是迄今为止发生事情的简单流程图。

4. 需要的库

我们想要让我们的应用程序在一周中的某一天问候用户，我们可以直接在我们的 greeter 模块引入 moment.js。

首先，我们需要通过 npm 来安装这个库

npm install moment --save

在我们再次打包更新之后，在浏览器的控制台我们将收到一下信息：

这时我们的流程图是这样的：

注意，在引入库时有更高级的用法，不在本文章的范围内，你可以点这了解更多。

5.Loaders

Loader 是 webpack 在打包过程中执行任务对文件进行预处理或后处理的方式。比如它可以编译 TypeScript, 加载 Vue.js 组件，渲染模板等等。大多数 loaders 是社区编写的，受欢迎的 loaders 清单可以看这里

假设我们想要添加一个 linter 到我们的项目中去检查我们 JavaScript 代码的错误。我们可以引入 JSHint loader 来实现，它可以捕获各种不良实践和语法错误。

首先我们需要安装 JSHint 和 webpack 的 JSHint loader:

npm install jshint jshint-loader --save-dev

之后我们需要在 webpack 配置文件中添加一些代码，这将初始化 loader，告诉它要检查哪些类型的文件，以及忽略哪些文件。

webpack.config.js

var path = require('path');
module.exports = {
 entry: './assets/js/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 // Add the JSHint loader
 module: {
 rules: [{
 test: /.js$/, // Run the loader on all .js files
 exclude: /node_modules/, // ignore all files in the node_modules folder
 use: 'jshint-loader'
 }]
 }
};
//在此我向大家推荐一个前端全栈开发交流圈：582735936 突破技术瓶颈，提升思维能力

现在当 webpack 启动后，它将在命令行显示一个警告列表(那些我们所忽略的文件)

因为 moment.js 位于 node_modules 文件中，它不会被 JSHint loader 检测。