如何搭建基于webpack4.0的单页多页应用脚手架，集成jQuery和React？

本文共计4745个文字，预计阅读时间需要19分钟。

1. 简介+首先简单介绍下webpack：现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖关系图（dependency graph），来确定所需处理的每个模块以及它们之间的依赖关系。

1.导语

首先来简单介绍一下webpack：现代 JavaScript 应用程序的 静态模块打包工具 。当 webpack 处理应用程序时，它会在内部构建一个会映射项目所需的每个模块 的依赖图(dependency graph)，并生成一个或多个 bundle 。webpack4.0出现之后，我们可以不用再引入一个配置文件来打包项目，并且它仍然有着很高的可配置性，可以很好满足我们的需求。 在开始正文之前，首先先来看看我们要实现的成果：

• 支持ES6+JQuery+Less/Scss的单页/多页脚手架
• 支持ES6+React+Less/Scss+Typescript的单页/多页脚手架
• 支持ES6+Vue+Less/Scss+Typescript的单页/多页脚手架

github地址：

基于webpack4.0搭建的脚手架（支持react/vue/typescript/es6+/jquery+less/scss)

在脚手架的开发过程中我会详细介绍每个插件或者loader的用途以及webpack的核心理念，如有不懂或者有其他更好的想法欢迎交流。 下面是基于该文章的webpack4.0的思维导图：

2.webpack核心概念

• 入口：指示 webpack 应该使用哪个模块作为入口起点
• 输出：告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件
• loader：让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用
• 插件：用于执行范围更广的任务。