如何使用webpack4.0实现“单页/多页支架”(jquery、react、vue、typescript)

1.介绍

首先，我们将简要介绍webpack:一种用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图来映射项目所需的每个模块，并生成一个或多个包。webpack4.0出现后，我们不需要引入配置文件来打包项目，它仍然是高度可配置的，可以很好地满足我们的需求。在开始本文之前，让我们先看看我们想要实现的结果：

支持ES6 JQuery Less/Scss单页/多页支架支持es6 reactiveless/scss typescript单页/多页支架支持ES6 Vue Less/Scss Typescript github地址：

基于webpack4.0的脚手架(支持react/vue/typescript/es6/jqueryless/scss)

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

2.2.webpack的核心概念

入口：指出webpack应该使用哪个模块作为输出的入口起点：告诉webpack在哪里输出它创建的包，以及如何命名这些文件。loader:使webpack能够处理其他类型的文件，并将它们转换成有效的模块供应用程序使用。插件：用于执行更广泛的任务。包括：打包优化、资源管理、注入环境变量模式：通过选择开发、生产或无之一来设置模式参数，从而通过不同的打包优化浏览器兼容性：支持所有符合ES5标准的浏览器(不支持IE8及以下版本)。官网的包装模型如下。

3.支持ES6 JQuery Less/Scs的单页/多页支架

在实现支架之前，假设我们已经创建了一个目录和包. json文件，然后首先安装与webpack相关的依赖项：

//建议在这里安装本地依赖项，安装全局依赖项时可能会出现版本问题。npm install -D webpack webpack-cli因为项目需要支持es6，我们还需要安装babel相关的依赖项：

这时，NPM install-d babel-loader @ babel/core @ babel/preset-env就可以开始配置我们的脚手架逻辑了。为了使项目结构清晰且易于维护，我们构建了一个构建目录来放置由webpack构建的脚本。webpack的默认配置文件是webpack.config.js由于实际项目需要，我们将其拆分为三个文件，分别是webpack通用配置文件webpack.base.js、开发环境配置文件webpack.dev.js和生产环境配置文件webpack.prod.js

让我们首先处理webpack.common.js文件

const path=require(' path ')；const web pack=require(' web pack ')；module . exports={ entry : { main 3360 }。/src/index.js '，}，output 3360 { path : path . resolve(_ _ dirname，'./dist ')，}，module : { rule 3360[/]$/，/？这意味着x有0个或一个exclude: /node_modules/，//文件包含：path.resolve (_ _ dirname，'./src’)不编译，//只在include包含的目录中编译加载程序，使用： ['babel-loader '，] }，] }，

公共目录是提前准备好的html模板，这里就不介绍了。其他目录可以根据具体项目进行设置。

我们还需要一个插件来将打包的文件植入html模板，并将其导出到使用html的dist目录