一、什么是WebPack

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

我的解释：把各种相同文件的类型，根据模块依赖关系（你自己显示声明的(Ex:import… require…)）自动打包成一个单独的文件。

二、为什么需要WebPack

1.让你无须处理JS依赖关系，像以前，你必须注意引用的JS文件是否依赖其他JS文件，如果依赖，则必须手动处理他们的声明顺序。因为在JS文件代码中不能显示引入另一个JS文件。

2.减少网络请求，像以前，会声明很多JS引用，造成多次请求文件。与WebPack相比，虽然最后得到的总文件体积没有改变多少，但由于WebPack把所需要的JS打包成了一个单独的文件，网络请求只有一次，所以访问网页速度相对来说速度较快。

三、WebPack环境搭建

1.Node.js

（1） 什么是Node.js

官方解释：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。

我的解释：Node.js就是一个Javascript的运行环境。和CLR、JVM有一点点类似。并且Node.js提供了Javascript的最新语法支持，具有面向对象的功能，因为把JS当做后端语言来用这是非常必要的。

（2） Node.js与WebPack的关系

WebPack是基于Node.js开发的，所以安装WebPack必须首先安装Node.js，Node.js去官网下载安装即可。npm是一个Node.s的包管理器，当你安装完成后，在命令行中输入npm –v 可以看到当前安装的版本，如下图所示：

2.本地安装与全局安装的区别

本地安装就是安装在你的项目目录下，因为没有设置环境变量，所以你必须要在BIN目录下去启动WebPack。全局安装就是安装在一个固定的地方，并且设置了系统的环境变量，以免除你输入一大堆路径的困扰。

3.本地安装

使用Node.js自带的包管理器npm来安装，用命令行工具进入到你的所在目录下，输入

npm install webpack

会产生以下文件

WebPack所在目录

4.全局安装

npm install webpack –g

先查看系统环境变量

找到npm所在的目录，可以发现WebPack的安装包

以上纯属个人理解，如有错误，希望指正！

1.WebPack概念的更多相关文章

  1. Webpack 概念

    概念 webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图表(dependency ...

  2. Webpack概念

    webpack概念 我经常用 webpack,打算做一次比较详细的概念清点和梳理.从 0 配置 webpack,由于 webpack5(2019.07.27)暂时还没有发布.并且从Webpack Mi ...

  3. [WIP]webpack 概念

    创建: 2019/04/09 概念    入口 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始. 进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖 ...

  4. webpack——概念的引入

    ## 在网页中会引用哪些常见的静态资源?+ JS - .js .jsx .coffee .ts(TypeScript 类 C# 语言)+ CSS - .css .less .sass .scss+ I ...

  5. Webpack 入门指迷--转载（题叶）

    最近看到这个东西,一头雾水.看了一些资料了解了Webpack概念,大体是webpack 是一个模块绑定器,主要目的是在浏览器上绑定 JavaScript 文件. 看到题叶写的一篇介绍,写的很好,转载连 ...

  6. webpack3中文版使用参考文档--全面解析webpack.config.js

    Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...

  7. 理解 Gulp 和 Webpack(转)

    Gulp 和 webpack 之间的关系是十分暧昧的,却也经常被人误解,以为它俩是竞争关系,其实不然. Gulp 是一个任务管理工具,让简单的任务更清晰,让复杂的任务易于掌控:而 webpack 的理 ...

  8. Webpack 打包工具

    1. webpack 概念 [文档地址](https://www.webpackjs.com/concepts/) 2. webpack 命令使用及相关工具包 1. webpack 安装和打包命令: ...

  9. 转：Cesium 和 Webpack

    原文地址:https://www.jianshu.com/p/85917bcc023f 注意:webpack 和 webpack-cli 的安装参考 https://www.cnblogs.com/m ...

随机推荐

  1. [ES6系列-04]再也不乱“哇”了：用 let 与 const 替代 var

    [原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 今天的内容是,关于 JavaScript 中定义变量 ...

  2. 【C++】常见易犯错误之数值类型取值溢出与截断(1)

    1. 数据类型数值范围溢出 如标题所述,该错误出现的原因是由于变量的值超出该数据类型取值范围而导致的错误. 例题如下: (IDE环境:C-Free,编译器为mingw5,如下图) # include ...

  3. 【C++】赋值过程中类型转换

    注意:以下内容摘自文献[1],修改了部分内容. 1.赋值过程中的类型转换 如果赋值运算符两侧的类型不一致,但都是数值型或字符型时,在赋值时自动进行类型转换. (1) 将浮点型数据(包括单.双精度)赋给 ...

  4. win上的python

    #启用浏览器,最大化窗口 #coding = utf-8 from selenium import webdriver class MyClass(object): ''' classdocs ''' ...

  5. 关于bootstrap modal 垂直滚动条 每次打开后不置顶的问题

    打开modal时,滚动条默认没有置顶. 查了很久,网上找了很多资料都没有解决. 经分析是需要在modal的消失事件中添加让滚动条置顶的方法.

  6. GTA5侠盗猎车5中文版破解版绿色版汉化版迅雷下载地址种子实测可用

    GTA5(侠盗猎车5)中文版下载地址(实测可用) 迅雷下载地址:https://www.90pan.com/b1548988 一定要关闭安全软件并且加入白名单 实测通过,关闭杀毒软件可以完美运行,最好 ...

  7. Java 第十一届 蓝桥杯 省模拟赛 合法括号序列

    合法括号序列 题目 问题描述 由1对括号,可以组成一种合法括号序列:(). 由2对括号,可以组成两种合法括号序列:()().(()). 由4对括号组成的合法括号序列一共有多少种? 答案提交 这是一道结 ...

  8. Java实现蓝桥杯VIP算法训练 相邻字母

    试题 算法训练 相邻字母 资源限制 时间限制:1.0s 内存限制:256.0MB [问题描述] 从键盘输入一个英文字母,要求按字母的顺序打印出3个相邻的字母,指定的字母在中间.若指定的字母为Z,则打印 ...

  9. Java实现 蓝桥杯VIP 算法提高 插入排序

    算法提高 插入排序 时间限制:1.0s 内存限制:256.0MB  插入排序 问题描述 排序,顾名思义,是将若干个元素按其大小关系排出一个顺序.形式化描述如下:有n个元素a[1],a[2],-,a[ ...

  10. Java实现 LeetCode 113 路径总和 II

    113. 路径总和 II 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标和 sum = ...