webpack总结（2）引用loader方式，babel

Loaders

鼎鼎大名的Loaders登场了！

Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

• test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
• loader：loader的名称（必须）
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项（可选）
  
  
• 
  使用loader
  
  
  require的方式使用loader
  
  配置文件中使用loader
  
  
  CLI的方式使用loader --module-bind命令后跟指定的loader
    --module-bind "css=style!css" 
• 
  babel 安装
  执行命令行：
  npm install --save-dev babel-loader babel-core(按照babel-loader，和babel-core)
  
  安装babel中的 preset-latest 插件
• 
  版本不断的更新，要指定参数，使用 presets，告诉babel-loader怎么处理我们的js，让它为我们的js去转换指定的某一些特性：
• 转换es2015的特性 指定es2015 。。。如要转换所有的特性，指定latest，包括一下：
  
  
  那我们怎么指定这些插件呢？（参考webpack官网，query parameters 参数部分）
  1.require方式中，loader的后面+？+参数
  
  在配置文件webpack.config.js中指定：
  
  
  可以在package.json 文件中指定（在package.json指定后，无需在配置文件中指定）
  
  
  
  打包过程中，会发现babel loader 转换特别耗时，如何改善呢？
  
  例如，exclude，include参数
  
  以上exclude，include的路径有误，官方解释：可以是正则表达式，可以是绝对路径的字符串，还可以是个函数，数组。。。
  
  require node——module中的path path.resolve(__dirname,'mode_modules')  解析绝对路径（当前路径+文件所在的相对路径），
  npm run webpack 打包一下会发现打包速度快很多