webpack配置基础[02] -webpack中的loader

loader简介

使用loader可以将浏览器暂时不支持的文件类型转化成浏览器支持的文件类型.它可以将TypeScript转化成ES5,将scss,less转化成css,将jsx,vue文件转化成js文件,并且还能对图片进行特殊的处理.

loader使用步骤

1. 通过npm安装

2.在webpack.congfig.js中的modules关键字下进行配置.

例1:对css文件进行打包

• 安装:
  1.css-loader:解析css文件后,使用import进行加载,并返回css代码

  npm install --save-dev css-loader
  

  2.style-loader:将模块的到处作为样式添加到DOM中

  npm install style-loader --save-dev
  

• 配置

const path = require('path')//导入node中的path包
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname/*当前文件路径*/,'dist') , //进行路径拼接
    filename: 'boundle.js'
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader' ]
      }
    ]
  }
}

//main.js
require('./css/background.css')

在配置时,webpack读取多个loader时是从右向左读取的,因此要想先加载css在应用样式需要将css-loader放在style-loader之后

例2:对图片的处理

由于图片加载需要文件路径,因此要安装url-loader和file-loader:

npm install --save -dev url-loader
npm install --save -dev file-loader

配置:

const path = require('path') //导入node中的path包
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname /*当前文件路径*/ , 'dist'), //进行路径拼接
    filename: 'boundle.js',
    publicPath:"./dist/" //url相关的地址会连接这个字符串
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192
            name:'img/[name].[hash:8].[ext]'//统一命名规范:名称.8位哈希随机.后缀名
          }
        }]
      }
    ]
  }
}

小于limit的图片会被转化成base64形式
大于limit的图片会在dist目录下生成一个图片,这个图片就是我们需要加载的,要使用这个图片需要在output对象中添加publicPath:"./dist/"属性.