webpack学习-处理less,图片,字体

以下是学习笔记:

1.下载相关处理包,并在config配置文件中配置loader项

2.前文中写过处理css文件的步骤为

// 使用步骤:
// 1 安装:  npm i -D style-loader css-loader
// 2 在 webpack.config.js 中的 module 里面配置loader处理规则 { test: /.css$/, use: ['style-loader', 'css-loader'] }

3.处理less文件

// 步骤：
// 1 安装包： npm i -D less-loader less
//           npm i -D style-loader css-loader
// 2 在 webpack.config.js 的 module 中添加一个规则
//{ test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },这里less-loader会自动去调用less模块处理less语法

4.处理图片(file-loader和url-loader)

4.1使用file-loader

// 1 安装： npm i -D file-loader
// 2 在 webpack.config.js 中的 module 里面添加一个rules
//{ test: /.(jpg|jpeg|png|gif)$/,use: 'file-loader'}

//在 file-loader 中，会使用 md5 处理图片文件，对于同一张不同名称的图片，只会加载一次,可以达到减少网络请求，加快网站的加载速度的效果

4.2使用url-loader

// 推荐使用 url-loader
// 1 安装： npm i -D url-loader
//   最好将 file-loader 一起安装
// 2 在 webpack.config.js 中，只要将 file-loader 替换为 url-loader 就可以了

{
　　test: /.(jpg|jpeg|png|gif)$/,

　　//loader: 'url-loader',如果不设置大小限制,直接这样配置即可

　　use: [

　　　　　　{
　　　　　　　　loader: 'url-loader',
　　　　　　　　options: {
　　　　　　　　// 单位：字节， 8Kb
　　　　　　　　// 如果图片的大小比 8kb 小，图片就会被处理为 base64
　　　　　　　　// 如果图片的大小大于或等于 8kb ，url-loader会自动调用 file-loader 来对图片重命名处理
　　　　　　　　// limit: 8192
　　　　　　　　}
　　　　　　}
　　　　　]
}

// url-loader 默认情况下，会将图片处理为base64编码的格式,直接内嵌到页面中,使得页面取消了一次该图片的请求,提高了性能,但不适合大图片
// data:image/png;base64, ....

5.处理字体

与处理图片一样,推荐使用url-loader(使用file-loader会被MD5处理重命名,使用url-loader则会被格式化为base64,也可以添加阈值)

{
        test: /.(eot|svg|ttf|woff|woff2|otf)$/,
        // use: 'file-loader'
        use: 'url-loader'
}

6.配置文件模板

// 配置loader
  module: {
    rules: [
      // test 是一个正则, 用来匹配加载文件的路径
      //  比如: import './css/index.css'

      // use 表示使用哪个loader来处理这个类型的文件
      // 注意: 有顺序!!!
      // 处理过程是: 从右往左

      // css-loader 读取CSS文件,将其转化为一个模块
      // style-loader 拿到css-loader读取到的css文件内容,然后,创建一个style标签,插入到head
      { test: /.css$/, use: ['style-loader', 'css-loader'] },
      { test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

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

      {
        test: /.(jpg|jpeg|png|gif)$/,
        // use: 'url-loader'
        use: [
          {
            loader: 'url-loader',
            options: {
              // 单位：字节， 8Kb
              // 如果图片的大小比 8kb 小，图片就会被处理为 base64
              // 如果图片的大小大于或等于 8kb ，url-loader会自动调用 file-loader 来对图片重命名处理
              // limit: 8192
              limit: 49877
            }
          }
        ]
      },

      // 处理字体
      {
        test: /.(eot|svg|ttf|woff|woff2|otf)$/,
        // use: 'file-loader'
        use: 'url-loader'
      },

      // 配置babel
      {
        test: /.js$/,
        use: 'babel-loader',
        // 排除掉不需要 babel 处理的文件路径
        // 一般，都会将 node_modules 排除掉
        exclude: /node_modules/
      },

      // 处理Vue单文件组件
      {
        test: /.vue$/,
        use: 'vue-loader'
      }
    ]
  }