webpack

个人博客前端渣渣不定期分享自己所学的前端知识

使用webpack也有一段时间了，但是没有系统的去学习，最近无心代码，正好用这段时间系统地看一下webpack,借鉴一下前辈们的经验，防止忘记，记录下来。

什么是webpack

---

Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模组化开发方式，将各种静态资源视为模组，并从它生成优化过的程式码。

Webpack可以从终端、或是更改 webpack.config.js 来设定各项功能。

要使用 Webpack 前须先安装 Node.js。Webpack 其中一个特性是使用载入器来将资源转化成模组。开发者可以自订载入器的顺序、格式来因应专案的需求。

上面是来自wiki的解释，简单来说webpack 是一个模块打包器。

它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。为前端开发人员提供了一种模组化的开发方式。webpack将开发过程中的各个js等文件进行打包成组件，可以说，在webpack中，所有资源都是模块。各个模块在使用的时候加载，相对于之前<script>的加载方式来说，webpack解决了像全局变量冲突，js必须按顺序加载等问题，同时方便开发人员进行资源管理，上手后简单易用。

安装

---

由于webpack依赖于Node.js运行，所以在安装webpack前要先安装Node.js。

安装完Node.js后，利用其包管理工具npm安装webpack：

$ npm install webpack -g

这样就将webpack安装到了全局环境，可以运行

$ webpack -v(或-h)

来查看已安装的webpack的版本号（或使用帮助）

在一般的开发环境中，我们会进入一个已经初始化的项目目录，使用命令

$ npm install webpack --save-dev

来安装webpack到项目中，之后就能够在项目中的配置文件中来配置具体项目的webpack，方便与他人协同的开发，又不会与本地的全局配置产生冲突。

怎么用

---

安装以后当然就是使用啦，这边我就不贴例子了，可以移步阮一峰的教程教程里面的例子怎么使用阮大已经讲得很清楚了

ps.教程中有提到，一些例子要跑起来需要安装依赖，要安装这些依赖可以在clone的项目目录下运行

$ npm install --save-dev

有关这方面的具体解释可以到网上搜索一下有关npm的知识，这里就略过了。

Loader

---

webpack默认只能加载js文件，要想加载其他资源文件，就需要使用loader进行转换,转换以后可以使用require进行加载

ps.loader与require的例子在上面阮大的教程中也有，具体使用可以进一步看看。

关于配置

---

webpack的具体工作方式，可以修改项目中的配置文件，文件一般是

webpack.config.js

具体配置方法需要对应到具体的项目实际当中，这一步我也没有研究过，在这就先略去，以后有机会碰到了，再继续往下延伸。

延伸阅读

Loader

require

webAPP

单页面应用