webpack-----文件处理

一、CSS\less文件的处理

1）通过npm安装使用的loader

   npm install --save-dev css-loader 安装后出现+ [email protected]即可配置成功！

   css-loader只负责加载不负责解析css文件

       npm install --save-dev style-loader 安装后出现+ [email protected]即可配置成功！

 [使用多个loader时是从右向左]
npm install --save-dev less-loader less

2)  在webpack.config.js中的module关键字下进行

  module:{
    rules:[
        {   //css文件处理
            test:/\.css$/,、【】
            use:['style-loader','css-loader'] //使用多个loader时是从右向左
        },
	{   //less文件处理
    test: /\.less$/,
    use: [{
        loader: "style-loader" 
    }, {
        loader: "css-loader" 
    }, {
        loader: "less-loader" 
    }]
}

    ]
}

二、图片文件的处理

1）当加载的图片小于limit时，会将图片编译成base64字符串形式

修改webpack.config.js配置文件

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

2）当加载的图片大于limit时，报cannot  find module "file-loader"------->npm install --save-dev file-loader（配置文件）

打包后dist文件夹下多了一张图片，其图片命名为32位哈希值，目的是不重复

publicPath:"dist"