webpack--图片处理：file-loader和url-loader

file-loader

file-loader工作步骤：

1. 把资源移动到输出目录
2. 返回资源最终的url

所以file-loader可以用来加载图片、字体等类型的资源

1 安装file-loader: npm i -D file-loader@2

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "start": "webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^1.1.3",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.5"
  }
}

2 配置：

{
        test:/\.png$/,
        use:['file-loader']
}

const HtmpWebpackPlugin=require('html-webpack-plugin');
const path=require('path');

module.exports={
  entry: './src/main.js',
  output:{
    path: path.resolve(__dirname,'dist'),
    filename: 'app.js'
  },
  plugins:[
    new HtmpWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    })
  ],
  module:{
    rules:[
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.png$/,
        use:['file-loader']
      }
    ]
  },
  devServer:{
    open: false,
    port: 9000
  }
}

3 放入png图片到项目中

4 css文件中引入图片：

body{
  background: url("./img.png")
}

5 测试成功：npm start

---

url-loader

url-loader会把图片以base64编码的方式进行编码，以减少图片的请求次数，同时可以设置图片尺寸限制，是file-loader的加强版。

1 安装：npm i -D url-loader@2

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "start": "webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^1.1.3",
    "url-loader": "^2.3.0",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.5"
  }
}

2 设置：小于10kb者进行base64编码

const HtmpWebpackPlugin=require('html-webpack-plugin');
const path=require('path');

module.exports={
  entry: './src/main.js',
  output:{
    path: path.resolve(__dirname,'dist'),
    filename: 'app.js'
  },
  plugins:[
    new HtmpWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    })
  ],
  module:{
    rules:[
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.(jpg|png|gif)$/,
        use:[
          {
            loader: 'url-loader',
            options:{
              limit: 10000 //小于10kb者进行base64编码
            }
          }
        ]
      }
    ]
  },
  devServer:{
    open: false,
    port: 9000
  }
}

3 测试成功：npm start