有关loader的使用

• 通过npm安装需要使用的loader

• 在webpack.config.js中的modules关键字下进行配置

• css loader
  //在webpack.config.js中进行配置

  module:{
    rules:[
      {
        test:/\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左应用的
        use:['style-loader','css-loader']
      }
    ]
  }

• less-loader
  //在webpack.config.js中的rules进行配置

    {
        test: /\.lest$/,
        use:[
          {loader:'style-loader'}, //将css文件应用到DOM中
          {loader:'css-loader'}, // 将css文件转换成CommonJS
          {loader:'less-loader'} //将less文件转换成css文件
        ]
      }

• img-loader

      {
        test:/\.(png|jpg|gif)$/,
        use:[
          {
            loader:'url-loader',
            options:{
              limit:8192
            }
          }
        ]
      }

• url-loader

//webpack.config.js

const path = require('path')
module.exports = {
  entry:'.src/main.js',
  output:{
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js',
    publicPath:'dist/' //以后涉及到任何URL的东西，都会在前面加上这个前缀。这个只要在开发时才需要，到了真正发布的时候，这个是要去除的。
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左应用的
        use:['style-loader','css-loader']
      },
      {
        test: /\.lest$/,
        use:[
          {loader:'style-loader'}, //将css文件应用到DOM中
          {loader:'css-loader'}, // 将css文件转换成CommonJS
          {loader:'less-loader'} //将less文件转换成css文件
        ]
      },
      {
        test:/\.(png|jpg|gif)$/,
        use:[
          {
            loader:'url-loader',
            options:{
              //当加载的图片少于limit时，会将图片编译成base64字符串形式。
              //当加载的图片大雨limit时，就需要使用file-loader模块进行加载。
              limit:8192,
              //这个选项的意思是
              //file：文件要打包到的文件夹
              //name：获取文件原来的名字，放在该位置
              //hash8：为了防止文件名字冲突，依然使用hash，但是我们只保存8位
              //ext：使用文件原来的扩展名
              name:'img/[name].[hash:8].ext'
            }
          }
        ]
      }
    ]
  }
}