引言

随着Web技术的发展，前端开发变得越来越复杂，涉及大量的JavaScript、CSS和HTML文件。为了提高开发效率和维护性，前端工程化应运而生，其中Webpack是最流行的模块打包工具之一。本文旨在介绍Webpack的基本概念及其在前端项目中的应用，并通过实战案例展示如何利用Webpack进行自动化构建。

当涉及前端性能优化时，Webpack 是一款不可或缺的工具。它不仅仅是一个模块打包工具，还提供了各种功能和插件，可以帮助开发人员优化前端应用程序的性能。在这篇文章中，我们将深入探讨如何有效地利用 Webpack 来优化前端性能，并介绍一些关键的优化技巧。

首先我们知道，Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它采用模块化的思想，将各种资源如 JavaScript、CSS、图片等视为模块，并通过 loader 将它们转换成浏览器可识别的格式。除此之外，Webpack 还提供了丰富的插件系统，可以用来处理各种优化任务，比如代码压缩、文件拆分、懒加载等。

作者：王圣松

转发链接：https://juejin.im/post/5dfd8a0c6fb9a0165f490004

概念

什么是 single-spa？

single-spa 一个基于JavaScript的

针对webpack，是大家（前端开发）在日常的开发中都会遇见的，通过书写的方式输出，学习到的关于前端工程化的小知识点的总结和学习，形成自己的知识体系

概念

webpack官网定义：

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

Webpack 是一个现代的静态模块打包工具，它的作用是将前端应用程序的各种资源（如 JavaScript、CSS、图片等）视为模块，并将它们打包成可以在浏览器中运行的静态文件。它的主要功能包括模块打包、资源优化、代码分割、加载器转换等。

2020-11-09

总结一下手动使用webpack进行项目构建，都有哪些步骤，以及有哪些步骤需要注意的

以下内容前提条件是安装了node.js

一首先创建项目路径并添加src、dist项目结构

src下文件包括css、js、images、index.html、main.js

main.js是项目打包的入口文件

F:\project_center\webpack_project

Webpack5入门与实战，前端开发必备技能｜完结无秘

//xia仔のke：quangneng.com/2638/

Webpack5入门与实战

Webpack5是现代前端开发中不可或缺的一部分，它是一个强大的模块打包工具，可以将项目中所有的代码模块打包成静态文件。Webpack5的新特性包括更快的算法和更优化的代码生成，这有助于加快构建速度并减小输出文件的大小。此外，Webpack5支持持久化缓存，可以在多次构建时复用之前的缓存，从而进一步提高构建速度。

入口和出口

$pwd
/Users/....../CodeLearning/Javascript/Webpack/entry-and-output
## 安装webpack
$yarn add webpack webpack-cli --dev
##安装特定版本
$yarn add webpack@4.29.6 webpack-cli@3.2.3 --dev
## 打包
$npx webpack