对于webpack的认知

webpack解决的问题就是前段模块化的问题

我们现在一般是用模块化去编程，什么是模块化？通常来说我们就是用import去导入我们所需要的文件，但是，浏览器不识别模块化，浏览器比较专一，他只识别html,css,js之类的，那我们怎么办呢？webpack的作用就出现了

我们通常编码的时候才用木块化，通过webpack解析模块化，然后将模块化里面的东西进行组装成html,css,js这样浏览器就能识别了，我们的开发效率也会大大提升。

dist是打包后的代码，我们通常开发都是在src里面进行模块化去开发的，所以src里面的都是模块化的代码，浏览器是不能识别的

webpack推荐局部安装，为什么呢？因为局部安装，你可以直接把项目给你的同事，让他去运行（也就是说把webpack直接安装到你项目当中），而全局安装的话，你的同事如果没安装，则运行不了。(目的就是减少对环境的依赖)

loader

loader就是将其他资源转换成木块

plugins插件

他的作用是将我们已经压缩过的文件变的再小一点，比如我们压缩后的文件为3兆，他可以减少为2兆，总之，他的存在就是做优化的

webpack把所有的代码都当成是模块，但是他能处理的仅仅是javascript,他只把javascript看做是模块，所以加载器，将其他资源转换为模块，安装方法如下

npm install --save dev style-loader(假设我们的需要转为模块的是style.css)

在装一个css-loader，然后css就变到js里面去啦，我们交互给客户的时候，就只有很少的文件啦

webpak只是做一个打包的作用，他并不能将es6的语法转换成es5的，只有使用babel-loader才可以将es6的转换成es5的

先去安装npm install --save dev babel-core

再去安装 npm install --save-dev babel-preset-env

再去安装 npm install --save-dev babel-loader

然后再src目录下面创建.babelrc的文件  这个就可以把es6文件转换成es5的啦  这边需要配置下s

file-loader  是所有文件模块化

安装：file-loader

npm install --save-dev file-loader  

配置：

modules:{

   loader:[{

      配置内容

}] 

}