webpack基本使用与介绍

1. js 依赖（引用）css 依赖（引用）jpg

 与Gulp Grunt相比对了模块打包的概念（没有html）

webpack只能直接加载和打包js 和json文件，要加载css，必须利用一个loader(webpack 1.0只能加载js   webpack 3增添加载json )

2.webpack3内部支持ES6 commandJS AMD三种模块语法 webpack1.0 ES6

只要打包主模块 主模块可以引入其它模块 会在打包后的js模块中体现出来

 

 第一种：打包js json模块

可以用webpack.js打包文件

补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

可以将小于8KB的图片以based64的编码形式打包到js文件（based64编码：将图片转化为字符串，打包到js，减少页面一次发图片请求）

css-Loader只负责加载css文件，而把这个文件应用到当前页面需要style-Loader.

打包大8KB的图片的时候

把index文件放到当前文件夹下

插件：先引入模块const 再配置 数组

第一个插件的作用：以某个模板自动生成目录资源文件夹底下的index.html

第二个插件：把资源目录全部底下全部删除，然后重新打包生成