7月8日学习打卡

最新推荐文章于 2024-10-31 16:17:19 发布

谁又乱了芳华

最新推荐文章于 2024-10-31 16:17:19 发布

阅读量128

点赞数

文章标签：大数据 webpack javascript 前端

本文链接：https://blog.csdn.net/aa1442987995/article/details/125687475

版权

学习内容：webpack中的loader

什么是loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL()。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

怎么使用loader

它有三种使用的形式：

（1）：在 webpack.config.js 文件中指定 loader。

（2）：在每个 import 语句中显式指定 loader。

（3）：在 shell 命令中指定它们。

怎么配置loader

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader',css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

css处理

首先安装 npm install css-loader

使用mini-css-extract-plugin将css抽离成一个单独的文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module:{
    rules:[
        //加载css样式，顺序不能颠倒
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
]
}

加载font字体

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module:{
    rules:[
         {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                //可以加载任何类型的资源
                type:'asset/resource'
            }
]
}

babel-loader

它是webpack解析ES6的桥梁

在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中，像下面这样：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}