webpack的基础知识总结

一、webpack是什么

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。

二、webpack使用

1、生成package.json文件

先装好node和npm，因为webpack是一个基于node的项目。然后首先我们需要在根目录下生成package.json文件，需要进入项目文件内根目录下执行如下命令：npm init -y

2、 安装webpack，webpack-cli

在c盘下会生成node_modules文件夹中会包含webpack，此时此刻我们可以使用webpack命令了；

在常规项目中把webpack依赖加入到package.json

npm install webpack webpack-cli -D

3、 loader

loader使用过程：
步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字进行配置。
注：大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法

4、1 webpack常用loader

5、创建webpack配置文件，让webpack构建更强大

在使用配置文件时，webpack的工作过程：

1.首先，webpack发现我们没用通过命令告诉它 要打包的文件路径 和 打包好的输出文件路径

2.webpack会去根目录下寻找一个webpack.config.js 的 配置文件

3，当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完这个配置文件，可以得到配置文件中导出的配置对象。

4.当webpack得到配置对象，就得到了配置对象中指定的入口和出口，然后进行打包构建。