webpack

1.之前我们使用在html文件当中直接引入js的方式。现在我们改用ES6引入模块的方式引入jquery插件。

2.浏览器中无法识别‘import $ from 'jquety'’的语法，node中也是无法识别的。但是webpack可以识别ES6的这种语法，可以通过执行模块打包化处理将这个语法解析成浏览器可以识别的语法，就可以在浏览器中运行了。webpack支持以下三种语法

3.webpack的两种使用方式：

1 命令行 

2 配置文件（webpack.config.js）  -->运行命令：webpack 

引入出口文件bundle.js

4.为了提高开发效率，我们将使用webpack-dev-server

webpack-dev-server本地是不会生成（dist）文件的，为了提高项目运行效率，直接将内容输出到内存中，（直接放到了服务器的根目录下面）为不是写入磁盘中，因为读文件操作文件效率是非常低的。

而webpack命令是会把项目文件写入到磁盘中的

配置说明-CLI配置

命令行界面（英语：command-line interface，缩写：CLI）

配置说明 - webpack.config.js  

配置文件 和 命令行 是可以结合到一起使用的！！！

命令行里面写只写hot，其余的命令在配置文件 webpack.config.js中用来配置 webpack-dev-server 的devServer属性中填写

使用html-webpack-plugin 插件

打开页面之后发现 html-webpack-plugin插件会帮助我们在页面中自动引入一个script标签，所以之前需要自己引入的script（bundle.js） 就可以删除了

Loaders（加载器）

webpack只能处理JavaScript资源，webpack通过loaders处理非JavaScript静态资源

main.js文件中导入需要导入的样式文件

webpack.config.js中设置静态资源模块

图片loader注意项

** file-loader：使用MD5加密算法，可以对文件进行计算，得到一个MD5字符串。优点是多张相同的图片只会被加载一次，提高性能，减少不必要的请求。

**url-loader：将图片或字体转化为base64编码格式的字符串，嵌入到样式文件中（不需要请求），但是字符串太长，不适合。但适用于小图标。base64编码格式是需要浏览器支持的

图片设置减少网络请求：1.精灵图（整合元素，只加载一次就可）  2.字体图标  3.base64（小图标适用，可以设定阀值）

引入字体文件css包

字体图标和图片一样

babel的loader

在module的rules中加一项，注意要排除node_modules文件夹，因为里面的语言就是SE5的 

在项目根目录中新建.babelrc配置文件