web包是德国开发者Tobias Koppers开发的模块加载器兼打包工具，在web包中，包括js (包括jsx )、coffee、样式) less/sass )、图像等因此，在web包中，js可以参照css，在css中嵌入图像数据URL。
为什么要使用web包
web包是前端的工具，可以让各个模块进行加载、预处理、打包，可以拥有Grunt或Gulp的所有基本功能。 好处包括：
支持commonJS和AMD模块。
支持调用许多模块加载器(包括babel-loader加载器)，并允许灵活地定制模块加载器。 这个加载器可以使用ES6的语法编写代码。
3 .通过将配置打包成多个文件，可以有效地利用浏览器的缓存功能来提高性能。
4 .使用模块加载器，可以支持sass、less等处理器进行封装，支持静态资源样式和图像进行封装。
安装nodejs
由于web包基于node.js进行工作，因此在学习web包之前必须安装node.js
node.js的安装步骤非常简单，安装如下即可：
1、下载nodejs的地址： nodejs.cn
2、nodejs的安装非常简单，根据提示一直进行下一步就可以了
安装web包
一、运行电脑的cmd。 (打开方法只有在windows r中弹出右图窗口，输入cmd后返回车中。 ）
二、node -v查看已安装的nodejs版本，出现版本号，表示nodejs已正确安装。 注：未显示版本号。 请注销计算机，然后重试。
三、npm -v要看npm的版本号。 npm是安装nodejs时一起安装的nodejs软件包管理器注： npm是nodejs的软件包管理器，管理node插件(包括安装、卸载、依赖关系管理等)。
四、安装全局webpack命令： npm install -g webpack (关于你的项目在哪个磁盘上就安装哪个磁盘的根目录，例如，项目为F磁盘，
五、在你的项目根目录下创建配置项目npm init后一直按回车键就可以了
六、npm install --save-dev webpack的安装是项目开发所需的依赖关系(安装成功后会出现右图的现象) )。
web包的简单使用方法(一) )。
index.html文件只是最基本的html代码，唯一的目的是加载打包的js文件(bundle.js )
在项目根目录下创建一个名为webpack.config.js的名称，并将以下代码写入配置项目：
//“__dirname”是Node.js中的全局变量，指向当前运行脚本的目录。
entry表示门户文件
条目： _ _域名'/app /主文件'，//门户文件的位置
输出：
path:__dirname '/public '，//打包后文件的位置
文件名3: ' bundle.js '//打包后的输出文件的文件名
创建门户文件main.js。 放入名为app的文件夹。 他的作用是引进我们的项目文件
greeter.js只包含一个用于在html文件中写问候的词。
运行web包，然后在命令行中输入web包(门户文件路径)生成文件的路径)
(注：文件路径相对于我们项目的根目录)
如果运行成功，页面将刷新，如下图所示，显示“欢迎使用备份网络视频教程”
另一种运行web包的方法
如果每次运行web包时都要运行web包web包(门户文件路径) ) )。
因为这很麻烦，所以只需要在package.json的设置项目中添加一行设置项目即可。
“开始”:“web包”只要在命令行的执行中执行npm start即可
(注意：由于start是特殊的名称，所以我们命名非start时，请在运行时输入npm run。 npm run hello等)
web包的加载程序
Loaders是web包中最核心的功能。 通过使用不同的loader，webpack通过调用外部脚本和工具，分析JSON文件并将其转换为JavaScript文件，或者将下一代的JS文件ES6、ES7转换为现代浏览器能够识别的JS文件或者对React的开发来说，合适的Loaders可以将React的JSX文件转换为JS文件。
负载的设定项目
必须单独安装Loaders，并且必须在webpack.config.js的modules关键字下配置。 Loaders的配置选项如下：
test :与loaders处理的文件的扩展名匹配的正则表达式(
加载器：加载器的名称(必需)
include/exclude:手动添加需要处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)。 (可选)
query :为loaders提供其他配置选项(可选)
视频链接地址： http://blog.Sina.com.cn/s/blog _ 1671244030102 wxpm.html
请关注更精彩的内容----微信公众号： houdunit
看完就跑，记住，不要吐！ (() () ) ) ) )。