webpack处理less、图片和字体

本文链接： https://blog.csdn.net/weixin_41282726/article/details/99695163

1. 处理 less 文件

步骤：
1 安装包： npm i -D less-loader less
           npm i -D style-loader css-loader
2 在 webpack.config.js 的 module 中添加一个规则

2. 处理图片文件 url-loader 或者 file-loader

file-loader 对图片进行重命名，然后，加载图片

 1 安装： npm i -D file-loader
 2 在 webpack.config.js 中的 module 里面添加一个rules

自己写的路径为：../imgs/a.jpg

文件路径被重命名为： 1ddb3677198212f7fea7ca4b9de18dcb.jpg

原理：

MD5 加密算法（消息摘要算法）通常就是 32 位

对于同一个文件或者字符，不管使用 md5 处理过多少次，那么，得到的 32位字符串都是相同的

在 file-loader 中，使用 md5 处理后，对于同一张不同名称的图片，只会加载一次，而如果不进行 md5 处理，就会加载两次，而这两张图片实际上就是同一张，实际上加载一次就可以了，这样的话，可以达到减少网络请求，加快网站的加载速度。

MD5 在项目中，一般可以用来进行密码加密处理

用户名 + 密码 ====> md5( 密码 ) ===> 1ddb3677198212f7fea7ca4b9de18dcb => 存储到数据库中

推荐使用 url-loader

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

url-loader 默认情况下，会将图片处理为base64编码的格式，base64 适合处理小图标，直接内嵌在页面中，减少了请求次数

扫描二维码关注公众号，回复： 7193806 查看本文章

data:image/png;base64, ....

.babelrc
{
  "presets": ["env", "stage-2"]
}

babel 是一个JS编译器，能够将最新的JS语法转化为浏览器能够识别的代码

 npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-stage-2

3. webpack.config.js

// 注意: 不要使用 ES6 中的模块化语法 import/export
const path = require('path')
// const webpack = require('webpack')

// 导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 处理Vue单文件组件的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/main.js'),

  // 出口
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },

  // 模式
  mode: 'development',

  devServer: {
    // 自动打开浏览器
    open: true,
    // 修改端口号
    port: 3000
    // 热更新: 只将修改过得内容加载到页面中, 而不是刷新整个页面
    // 第一步:
    // hot: true
  },

  // 配置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'
      }
    ]
  },

  plugins: [
    // 第二步:
    // new webpack.HotModuleReplacementPlugin(),

    new HtmlWebpackPlugin({
      // 指定模板文件路径
      template: path.join(__dirname, 'index.html')
    }),

    new VueLoaderPlugin()
  ]
}