这是我参与「第五届青训营 」笔记创作活动的第8天
一、什么是webpack
官方解释
从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。 前端模块化，webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系
具体看：webpack.docschina.org/concepts/
二、webpack的安装（wepack为了正常运行必须依赖node环境，而node环境为了可以正常的执行，必须使用npm工具管理node中各种依赖的包）
因此安装webpack首先要安装Node.js，Node.js自带了软件包管理工具npm
三、webpack的配置
1、文件和文件夹解析 dist文件夹：用于存放之后打包的文件 src文件夹：用于存放我们写的源文件 main.js：项目的入口文件。 mathUtils.js:定义了一些数学工具函数，可以在其他地方引用，并且使用。 index.html: 浏览器打开展示的首页html（在这里引用的是src内最终打包的文件即dist文件夹的内容）。 package.json：通过npm init生成的，npm包管理的文件。 以下为mathUtils.js文件和main.js文件中的代码：（CommonJS模块化规范，CommonJS是模块化的标准，nodejs就是CommodJS（模块化）的实现）
四、loader的使用
-
通过npm安装需要使用的loader （npm install --save-dev css-loader ）（npm install --save-dev style-loader） 在webpack的官方中，找到如下关于样式的loader使用方法：
-
在webpack.config.js中的modules关键字下进行配置
说明： 其中css-loader只负责加载css文件，并不负责将css具体样式嵌入到文档中 此时，我们还需要一个style-loader帮助我们处理
注意：style-loader需要放在css-loader的前面。
less文件处理
- 安装对应的loader（注意：这里还安装了less，因为webpack会使用less对less文件进行编译）。命令：
npm install --save-dev less-loader less - 修改对应的配置文件（在webpack.config.js）中添加一个rules选项，用于处理.less文件。
图片文件处理
-
在项目中加入两张图片（一张小于8kb，另一张大于8kb）
-
先考虑在css样式中引用图片，如下
-
修改对应的配置文件（在webpack.config.js）中添加一个rules选项，用于处理图片文件。如下：
-
打包之后发现出错，因为大于8kb的图片会通过file-loader进行处理，但是我们的项目中并没有file-loader。（需要安装file-loader，命令npm install --save-dev file-loader），安装之后在打包，就会发现dist文件夹下多了一个图片文件。
