webpack入门学习总结

最新推荐文章于 2024-10-05 15:34:06 发布

Yad1219

最新推荐文章于 2024-10-05 15:34:06 发布

阅读量109

点赞数

分类专栏： webpack 文章标签： webpack js

本文链接：https://blog.csdn.net/yad_ya/article/details/115518666

版权

3 篇文章 0 订阅

订阅专栏

本文是Webpack入门学习的总结，介绍了Webpack的基本概念，包括作为前端资源构建工具的角色，以及五个核心概念：Entry（入口）、Output（输出）、Loader（加载器）、Plugins（插件）和Mode（模式）。通过这些概念，你可以理解Webpack如何管理和打包前端模块。

摘要由CSDN通过智能技术生成

一、Webpack 简介

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解
JS)

插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。

模式(Mode)：指示 webpack 使用相应模式的配置。

选项	描述	特点
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。	能让代码本地调试运行的环境
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。	能让代码优化上线运行的环境