如何用webpack4.0撸单页/多页脚手架(jquery, react, vue, typescript)

主要介绍了如何用webpack4.0撸单页/多页脚手架(jquery, react, vue, typescript)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧Webpack 4.0是一款强大的模块打包工具，用于构建现代JavaScript应用程序。它能够构建依赖图并生成一个或多个bundles，以便浏览器加载。在Webpack 4.0中，不再强制要求初始配置文件，但依然保持高度可配置性。本文将探讨如何使用Webpack 4.0构建单页和多页应用脚手架，涉及的技术栈包括jQuery、React、Vue和TypeScript，同时支持ES6+、Less/Scss。我们需要安装必要的依赖，例如`webpack`和`webpack-cli`作为基础，`babel-loader`、`@babel/core`和`@babel/preset-env`用于将ES6+代码转换为ES5兼容格式。安装时推荐使用局部依赖，避免全局依赖带来的版本冲突。配置文件通常分为三个部分：`webpack.base.js`（通用配置）、`webpack.dev.js`（开发环境配置）和`webpack.prod.js`（生产环境配置）。例如，在`webpack.common.js`中，我们定义入口文件和输出路径，以及使用`babel-loader`处理`.jsx?`文件，排除`node_modules`目录，并限制只在指定的源码目录下进行编译。项目结构应该根据实际需求来组织，通常包括公共HTML模板（如`public`目录），以及其他如`src`目录用于存放源码。为了在HTML中自动插入打包后的文件，我们需要使用`html-webpack-plugin`插件，通过npm安装后在配置文件中引入并配置。对于单页和多页应用，主要区别在于入口文件的配置。在单页应用中，通常只有一个主入口文件，而在多页应用中，每个页面可能对应一个入口文件。例如： ```javascript // webpack.common.js entry: { page1: './src/page1.js', page2: './src/page2.js', }, ```对于不同框架（jQuery、React、Vue）的支持，我们需要安装对应的库和相应的loader，例如`vue-loader`、`react-hot-loader`等。对于TypeScript，需要安装`ts-loader`和`@types`对应库的类型定义。在模式（mode）方面，Webpack提供了development、production和none三种模式，分别对应不同的优化策略。开发模式下，Webpack会开启SourceMap，方便调试；生产模式则会进行代码压缩、去除警告等优化。此外，Webpack支持浏览器兼容性，它默认支持符合ES5标准的浏览器，不支持IE8及以下版本。如果需要支持旧浏览器，可以通过Babel配置转换更低版本的JavaScript。总结来说，构建基于Webpack 4.0的单页/多页脚手架涉及的主要步骤包括： 1.安装必要的依赖。 2.分离配置文件，分别处理通用、开发和生产环境的配置。 3.使用`babel-loader`等工具处理ES6+、TypeScript等非JavaScript代码。 4.设置项目结构，包括入口文件、输出路径、静态资源目录等。 5.配置`html-webpack-plugin`插件，自动注入打包后的文件到HTML中。 6.根据应用类型（单页/多页）配置入口文件。 7.根据应用技术栈（jQuery、React、Vue）安装和配置相应的库和loader。 8.设置模式以适应开发和生产环境的优化需求。在开发过程中，理解Webpack的核心概念（入口、输出、loader、插件和模式）至关重要，这有助于构建出高效、可维护的脚手架。如果有任何疑问或想要分享经验，欢迎交流讨论。