webpack 中的loader

什么是loader

webpack是用来干什么的呢

• webpack主要是用于处理js代码并自动处理js中的各种依赖，但是在实际开发中我们不仅仅有基础的js代码处理，更加有将typeScript转换成es5代码或者将scss,less转换成css,以及将.jsx(react框架)，.vue文件(vue框架)转换为js代码。对于webpack本身来说是不支持这些能力的，而要实现这些功能，则需要对webpack进行基础的loader扩展。

loader扩展的使用

步骤一：通过npm安装需要使用的loader 步骤二: 在webpack.config.js的modules关键字下进行配置

webpack 读取loader的顺序

从右向左读。
 例子：['style-loader','css-loader']。
   css-loader用于将样式打包，但是并不渲染进html中，而style-loader则负责将样式加进dom中。

一些较常用的webpack loader

   1.css-loader    2.style-loader  3.url-loader  4.file-loader
   5.babel-loader  

webpack中可以指定打包目录

如指定图片打包目录以及命名方式(在file-loader中)：

  options:{ name:'img/[name].[hash:8].ext'}