webpack搭建前端项目-前端webpack异步加载

webpack流行了很久，但是很多同学在使用webpack的时候还是一头雾水。 看到那么多文档，各种配置，各种loader，插件，顿时头晕目眩。 我也不例外，让我对webpack有了一点了解已经很久了。 但是想要继续做好前端，webpack是一道必须跨过的坎。 其实掌握webpack并不难，只是我们没有找到正确的方法。 这篇文章是我自己在学习webpack时的心得，供大家参考。

什么是网页包？

一句话概括：webpack 是一个模块打包器。

重点在“模块”和“包”这两个关键词上。 什么是模块？ 让我们回顾一下以前的前端开发方法。 JS文件通过script标签静态导入。 由于js文件之间没有强依赖关系，如果文件1需要使用文件2的一些方法或变量，则文件1必须放在后面加载的文件2中。 随着项目的增长，js文件之间的依赖关系越来越复杂，维护难度也越来越高。 这样的困境促使前端工程师去探索新的开发模式。 我们从后端和应用程序开发模型中获得灵感。 为什么不能引入“模块”的概念，让js文件之间可以相互引用呢？ 如果模块1要使用模块2的功能，只需要在模块1中显式引用模块2即可，无需关心它们的排列顺序。 基于这个理念，创建了CommonJS和AMD规范，然后有require.js和system.js等前端模块加载工具，以及node模块系统，直到现在流行的es6模块。

模块的引入解决了文件之间依赖引用的问题，而打包则解决了文件过多的问题。 当项目规模变大，模块数量上千时，如果浏览器加载这么多文件，页面加载速度势必会受到影响，而bundler可以将多个关联文件打包在一起，大大减小文件大小。 定量提高页面加载性能。 提供模块化的开发方式和编译打包功能是webpack的核心，其他很多功能都围绕着它们展开。

核心理念

模块

对于webpack来说，模块不仅仅是一个javascript模块，它包括任何类型的源文件，无论是图片、字体，还是json文件，它都是一个模块。 Webpack 支持通过以下方式引用模块：

Dependency Graph（依赖关系图）

所谓依赖图，就是webpack根据各个模块之间的依赖关系递归生成的内部逻辑图。 有了这个依赖图，webpack 就可以根据这个图把所有需要的模块打包成一个 bundle 文件。

入口

绘制依赖图的起始文件称为条目。 默认入口是./src/index.js，也可以在配置文件中配置。 条目可以是一个或多个。

单次入境：

或者

多个条目，一个块

我们也可以指定多个独立的文件作为条目，但是将它们打包成一个块。 这种方法称为多主入口。 我们需要传入一个文件路径数组：

但这种方式灵活性和扩展性有限，不推荐使用。

多个条目，多个块

如果有多个entry，每个entry生成对应的chunk，我们需要传入object：

这种写法具有最好的灵活性和扩展性，并且支持与其他部分配置合并。 例如，将开发环境与生产配置分离，将公共配置抽取出来，然后在不同环境运行时将环境配置与公共配置合并。

输出

哪里有入口，哪里就有出口。 export顾名思义就是webpack打包的输出webpack搭建前端项目，output定义了输出路径和文件名。 Webpack 默认的输出路径是./dist/main.js。 同样，我们可以在配置文件中配置输出：

多个条目的情况

当有多个条目时，一个条目应该对应一个输出。 此时输出的文件名需要用替换声明，以保证文件名的唯一性。 例如，使用入口模块的名称：

最后会在./dist路径下生成两个bundle文件app.js和search.js。

装载机

webpack本身只支持加载js和json模块，而webpack的思想是让所有的文件都能被引用加载并生成依赖图，于是加载器就派上用场了。 Loader 使 webpack 能够处理其他类型的文件（例如图像、字体文件、xml）。 我们可以像这样在配置文件中定义一个加载器：

webpack.config.js

其中，test定义了需要转换的文件或文件类型，use定义了转换文件的loader类型。 这个配置相当于告诉webpack，遇到引用txt文件时（使用require或import引用），先用raw-loader转换文件，然后打包到bundle中。

还有其他各种类型的loader，比如加载css文件的css-loader，加载图片和字体文件的file-loader，加载html文件的html-loader，将最新的JS语法转成ES5的babel-loader，以及很快。 有关完整列表，请参阅 webpack 加载程序。

插入

Plugin 和 loader 是两个容易混淆和模糊的概念。 Loader用于转换和加载特定类型的文件，所以loader的执行层次是单一源文件。 该插件可以实现更强大的功能。 该插件可以监控webpack处理过程中的关键事件，并深度集成到webpack编译器中。 可以说插件的执行层面就是整个构建过程。 Plugin系统是webpack的中坚力量，webpack本身就是建立在plugin系统的基础上的。 Webpack 拥有丰富的内置和外部插件，并允许用户自定义插件。 官方列出的插件是这些。

不同于loader，我们必须先引用plugin才能使用plugin，例如：

实践

在了解了webpack的基本概念之后，我们通过实践来加深理解。 接下来我们使用webpack搭建一个简单的react脚手架。

创建项目

首先创建react-webpack-starter项目，并使用npm init进行初始化。

安装依赖项

安装反应

安装webpack相关

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader

安装webpack-cli后，可以在命令行执行webpack命令； webpack-dev-server提供一个简单的web服务器，自动执行webpack编译操作，修改文件后自动刷新浏览器，免去重复的手动操作；html-webpack-plugin用于自动生成index.html文件，并自动添加对 index.html 中的捆绑文件的引用； style-loader 和 css-loader 用于加载 css 文件。

安装babel相关

由于react使用了class、import等es6语法，为了提高网站的浏览器兼容性，我们需要用babel进行转换。

其中@babel/core是babel的核心模块，包含了babel的核心功能； @babel/preset-env 支持转换ES6和更新的js语法，可以根据兼容浏览器的类型选择加载的插件，简化生成的代码； @babel/preset-react 包含babel转换react所需的插件； babel-loader 是 webpack 的 babel 加载器。

配置 webpack

在项目根目录下新建webpack.config.js，内容如下：

webpack.config.js

其中，HtmlWebpackPlugin使用自定义模板生成html文件。 模板内容如下：

./src/index.html

配置 babel

在项目根目录下新建.babelrc文件，配置我们安装的两个babel presets：

.babelrc

生成 React 应用根节点

./src/索引

./src/component/App.js

./src/components/App.css

配置 package.json

最后，在 package.json 文件中添加两个脚本来运行开发服务器和包：

包.json

注意，我们开启了webpack-dev-server的模块热更新功能（HMR）webpack搭建前端项目，进一步提升我们的开发效率。

至此，最简单版本的react脚手架搭建完成。 我们运行一下看看效果：

是不是没有想象中那么难？ 当然，webpack还有很多其他的功能和特性需要掌握。 希望您在参考本文后，进一步的学习会更加顺利。

本文demo地址：

本文首发于SegmentFault专栏《半路出家的老菜鸟》