先行者计划--1109微课总结 | 《通过二个demo初识webPack》

webpack，到底是什么呢？

Webpack将所有静态资源都认为是模块，

比如JavaScript，CSS，LESS，图片,...,从而可以对其进行统一管理。

为此Webpack引入了加载器的概念，除了纯JavaScript之外，

每一种资源都可以通过对应的加载器处理成模块。

WebPack可以看做是模块的打包机器：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript，jsx,vuex等），并将其转换和打包为合适的格式供浏览器使用。

比如LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，

最后由style-loader加载器对其做最后的处理，

从而运行时可以通过style标签将其应用到最终的浏览器环境。

<!-- 安装 -->

它有二个必备的文件：

1，webpack.config.js；

每个项目的根目录，都要有webpack，它是一些设置，有固定的格式

2，package.json；它是记录当前项目的一些依赖关系

--当你拿到一个项目的时候，只要它有package.json，

那么你就可以安装它里面所记录的一些依赖文件。

<!-- -->

1、进入你的项目目录；

2、运行 npm install webpack -g //全局安装

3、npm init //初始化你的package.json

4、在你的项目目录中，运行：

npm install webpack -save-dev