系统学习webpack之——解析样式，图片和字体

解析样式

npm i style-loader css-loader -D
npm i less-loader less -D

引入样式后，在webpack.config.js中配置

module.exports = {
  entry: {
    index:"./src/index.js",
    search:"./src/search.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'production',
  module:{
    rules:[
      {
        test:/\.js$/,
        use:'babel-loader'
      },
      {
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      },
      {
        test:/\.less$/,
        use:[
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test:/\.(png|jpg|gif|jpeg)$/,
        use:[
          {
            loader:'url-loader',
            options:{
              limit:10240
            }
          }
        ]
      }
    ]
  }
}

链式从右到左执行，所以对于解析css一定要把style-loader放在上面，把css-loader放在下面。
对于解析less一定要把style-loader放在上面，把css-loader放在中间，把less-loader放在最下面。

图片解析

1.正常对于图片文字进行解析

npm i file-loader -D

在webpack.config.js中配置：

{
        test:/\.(png|jpg|gif|jpeg)$/,
        use:'file-loader'
      }

2.可以使用url-loader，对于较小图片解析为base64位

npm i url-loader

在webpack中配置：

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

当图片小于10KB时，将自动转换为base64.