处理项目中的资源文件

loader是什么？
loader特性
loader三种使用方式

代码地址：https://gitee.com/q_yup/webpack-demo1.git
什么是Loader以及Loader的特性
loader是什么？
用来处理资源文件（.vue,.js,.css,.less），处理之后会返回文件
loader特性
可以通过正则表达式确定文件后缀，然后统一处理
loader三种使用方式
a.直接在require声明中直接使用loader

//webpack-test  hello.js
require('style-loader!css-loader!./style.css');
//携带参数
require('style-loader?name=hello/world!css-loader!./style.css');

b.使用webpack配置文件webpack.config.js

{
    module:{
        loaders:[
            {test:/\.css$/,loader:"style!css"}
        ]
    }
}
//携带参数一
{
    module:{
        loaders:[
            {test:/\.css$/,loader:"style?name=hello/world!css"}
        ]
    }
}
//携带参数二
{
    module:{
        loaders:[
            {
              test:/\.css$/,
              loader:"style!css",
              query:{
                name:"hello/world"
               }
            }
        ]
    }
}

指定参数意义 presets

转换指定特性es6、es7

latest转换所有特性

//参数名为presets，有特殊意义
{
  module:{
      loaders:[
          {
            test:/\.css$/,
            loader:"style!css",
            query:{
              presets:['latest']
             }
          }
      ]
  }
}

babel-loader携带参数方式3：
在项目根目录新建文件.babelrc，文件内容为：

{
presets:['es2015']
}

babel-loader携带参数方式4：
在package.js的根节点添加属性babel

{
"babel":{
presets: ['lastest']
}
}

c.cli方式，在package.js中配置执行脚本

  "scripts": {
       "webpack":"webpack hello.js hello.build.js  --module-bind css=style-loader!css-loader"
  }

使用babel-loader转换ES6代码

npm i babel-loader@6.2.7 babel-core@6.18.0 —save-d
npm i babel-preset-latest —save-d
babel-preset-latest 版本号：^6.24.1 备注：给loader传参指定参数为： presets:[‘latest’]时需要安装
babel打包非常耗时，有以下几种优化方案

步骤一：
a.添加exclude，babel处理ES6语法文件的排除范围值可以是字符串或是数组
b.添加include，babel处理ES6语法文件的处理范围值可以是字符串或是数组
步骤二：
修改相对路径为绝对路径 path.resolve(__dirname, “src”);//path来源于node，在文件中导入 let path = require(‘path’);

  module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: path.resolve(__dirname, "node_modules"),//排除范围：node_modules除外
                include: path.resolve(__dirname, "src"),//处理范围：只处理src文件夹
                query: {
                    presets: ['latest']
                }
            }
        ]
    },

loader 字符串，如果存在多个loader使用!分隔（例如：style-loader!css-loader）
loaders 用数组
处理顺序字符串由右向左数组从最后一个到第一个

下面只是例子，不确定loader与loaders是否可以共存，先认为不可以吧！（自我猜测）

module: {
loaders: [
  {
    test: /\.js$/,
    loader: 'babel',
    exclude: path.resolve(__dirname, "node_modules"),//排除范围：node_modules除外
    include: path.resolve(__dirname, "src"),//处理范围：只处理src文件夹
    query: {
      presets: ['latest']
    }
  }, {
    test: /\.css$/,
    include: path.resolve(__dirname, "src"),
    loader: 'style-loader!css-loader!postcss-loader',
    loaders: [
      'style-loader',
      'css-loader',
      'postcss-loader'
    ]
  }
]
  },

处理项目中的css

css-loader 在JS文件中可以处理css
style-loader 生成style标签，导入到引用JS的html中
```
npm i css-loader@0.25.0 style-loader@0.13.1 --save-dev
```
postcss-loader 处理css文件的语法适配浏览器问题

autoprefixer 添加浏览器前缀 postcss-loader的插件

npm i postcss-loader@1.1.0 --save-dev
npm i autoprefixer@6.5.1 --save-d

 module: {
      loaders: [
         {
              test: /\.css$/,
              include: path.resolve(__dirname, "src"),
              /* 
               在webpack.config.js中处理
               使用import导入css文件，不会通过postcss-loader的插件autoprefixer处理，需要给css-loader出入参数（importLoaders=1），告诉css-loader对导入的css处理之后在使用后面的几个loader处理（用后面的一个loader处理）
               注意查看src/components/css/common.css代码帮助理解
               */
              loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
          }
      ]
  },
  postcss: [//postcss-loader的插件plugin
      require('autoprefixer')({
          broswers: ['last 5 versions']
      })
  ],

使用less和sass

安装处理less的loader，如果安装过程中，提示缺失less，就需要安装一下less
```
npm i less-loader@2.2.3 --save-dev
```
在webpack.config.js中配置的loader可以敲缩写(“-loader”可省略)，注意多个loader的处理顺序
loader的处理方式是从右到左

postcss位置，官网说明：style!css!postcss!less

module: {
      loaders: [
          {
              test: /\.js$/,
              loader: 'babel',
              exclude: path.resolve(__dirname, "node_modules"),//排除范围：node_modules除外
              include: path.resolve(__dirname, "src"),//处理范围：只处理src文件夹
              query: {
                  presets: ['latest']
              }
          }, {
              test: /\.css$/,
              include: path.resolve(__dirname, "src"),
              /* 
               在webpack.config.js中处理
               使用import导入css文件，不会通过postcss-loader的插件autoprefixer处理，需要给css-loader出入参数（importLoaders=1），告诉css-loader对导入的css处理之后在使用后面的几个loader处理（用后面的一个loader处理）
               注意查看src/components/css/common.css代码帮助理解
               */
              loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
          },{
              test:/\.less$/,
              /* less对@import的less以做处理所以不需要添加参数 ?importLoaders=1，与css的处理形成对比*/
              loader:"style!css!postcss!less"
          }
      ]
  }

处理模板文件

处理html文件方式一：让webpack.config.js把html文件当成一个字符串处理
```
npm i html-loader@0.4.4 --save-dev
```
处理html文件方式二：让webpack.config.js把html文件当成一个已经编译好的模板处理函数
```
npm i ejs-loader@0.3.0 --save-dev
```

.tpl文件通过ejs-loader处理之后会返回一个function
jsx文件，render函数支持jsx，通过babel处理jsx语法，不需要安装loader处理（现在不太理解）

处理图片以及其他文件

安装处理文件的loader，并配置webpack.config.js

npm i file-loader@0.9.0 --save-dev

css文件对图片引用
模板（html、tpl）文件引用图片，比如img标签

引用图片并没有向视频中讲解的那样正常展示

解决办法使用绝对地址

使用${require(‘../../assets/bg.png’)}引入

<!-- 不显示 -->
<img src="../../assets/bg.png"/>
<!-- 解决方法 -->
<img src="${ require('../../assets/bg.png') }"/>
<div class="layer">
 <div>this is <%= name %> layer</div>
 <%for(var i=0;i<arr.length;i++){%>
     <%= arr[i]%>
 <%}%>
</div>

最顶层的html文件，也会引用图片（根目录的index.html）

引用图片并没有向视频中讲解的那样正常展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
      <%= htmlWebpackPlugin.options.title %>
        </title>
      </head>
    <body>
      <img src="src/assets/bg.png"/>
      <div id="app">
      </div>
    </body>
</html>

使用file-loader传参更换文件打包后的路径

module: {
  loaders: [
    {
      test: /\.(png|jpg|gif|svg)$/,
      loader: "file",
      query:{
        /* [name]-[hash:5].[ext]  文件名-hash的前五位.后缀 */
        name:"assets/[name]-[hash:5].[ext]"
      }
    }
  ]
    },

传入limit参数，大于指定数会交给file-loader处理文件，小于时会将文件转换成base64格式的编码

npm i url-loader@0.5.7 --save-dev

优缺点：file-loader处理图片，最终会用到http请求，可利用浏览器缓存
url-loader处理图片，小图片转换成base64，没有缓存可言，而且还会增加文件大小（代码冗余、增加代码体积）
根据场景择优使用

图片加载优化-压缩 image-webpack-loader(参数众多，官网自行了解)
webpack 多个loager串联的处理顺序是从右到左（字符串loader、数组loaders）

npm i image-webpack-loader@4.3.1 --save-dev

let htmlWebpackPlugin = require("html-webpack-plugin");
let path = require('path');
// 存在一个上下文就是根目录
module.exports = {
  entry: './src/app.js',//打包入口
  output: {
    path: "./dist",//打包之后文件的存放路径
    filename: "js/[name].bundle.js"//打包之后的文件名
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: path.resolve(__dirname, "node_modules"),//排除范围：node_modules除外
        include: path.resolve(__dirname, "src"),//处理范围：只处理src文件夹
        query: {
          presets: ['latest']
        }
      }, {
        test: /\.html$/,
        loader: "html",
        include: path.resolve(__dirname, "src"),//处理范围：只处理src文件夹
      }, {
        test: /\.tpl$/,
        loader: "ejs"
      }, {
        test: /\.css$/,
        include: path.resolve(__dirname, "src"),
        /* 
        在webpack.config.js中处理
        使用import导入css文件，不会通过postcss-loader的插件autoprefixer处理，需要给css-loader出入参数（importLoaders=1），告诉css-loader对导入的css处理之后在使用后面的几个loader处理（用后面的一个loader处理）
        注意查看src/components/css/common.css代码帮助理解
        */
        loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
      }, {
        test: /\.less$/,
        /* less对@import的less以做处理所以不需要添加参数 ?importLoaders=1，与css的处理形成对比*/
        loader: "style!css!postcss!less"
      }, /* {
      test: /\.(png|jpg|gif|svg)$/,
      loader: "file",
      query:{
      name:"assets/[name]-[hash:5].[ext]"
      }
      }, {
      test: /\.(png|jpg|gif|svg)$/,
      loader: "url",
      query:{
      name:"assets/[name]-[hash:5].[ext]",
      limit:20000,//以byte为单位
      }
      },*/
      {
        test: /\.(png|jpg|gif|svg)$/,
        loaders:[
          "url?limit=10000&name=assets/[name]-[hash:5].[ext]",
          "image-webpack"
        ]
      } 
    ]
  },
  postcss: [//postcss-loader的插件plugin
    require('autoprefixer')({
      broswers: ['last 5 versions']
    })
  ],
  plugins: [
    new htmlWebpackPlugin({
      filename: "index.html",
      template: 'index.html',
      inject: "body",
      title: "hello webpack",
    }),
  ]
}

loader是什么？

loader特性

loader三种使用方式