• 通過npm安裝需要使用的loader

• 在webpack.config.js中的modules關(guān)鍵字下進行配置

• 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文件轉(zhuǎn)換成CommonJS
          {loader:'less-loader'} //將less文件轉(zhuǎn)換成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的東西，都會在前面加上這個前綴。這個只要在開發(fā)時才需要，到了真正發(fā)布的時候，這個是要去除的。
  },
  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文件轉(zhuǎn)換成CommonJS
          {loader:'less-loader'} //將less文件轉(zhuǎn)換成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'
            }
          }
        ]
      }
    ]
  }
}