Webpack:Loader学习——异步 loader

最新推荐文章于 2024-04-10 20:21:12 发布

¡Venceremo

最新推荐文章于 2024-04-10 20:21:12 发布

阅读量226

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129922276

版权

Webpack 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

文章讨论了如何在Webpack配置中使用同步和异步Loader。同步Loader遵循顺序执行，而异步Loader允许在加载过程中进行延迟处理。示例中展示了如何配置多个Loader处理.js文件，并使用HtmlWebpackPlugin处理HTML模板。在尝试结合同步和异步Loader时，可能出现由于异步操作未返回值导致的问题。

摘要由CSDN通过智能技术生成

同步loader

异步loader

使用这两个loader

  {
        test: /\.js$/,//处理js文件
        use: ["./loaders/demo/test1","./loaders/demo/test2"],
      },

const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/main.js",//根据找到依赖
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "js/[name].js",// filename: 输出文件名
    clean: true,
  },
  module: {//编译记载配置
    rules: [
      //   {
      //   test: /\.js$/,//处理js文件
      //   loader: "./loaders/test-loader.js",//将要处理文件作为参数传到test-loader.js
      // },
      {
        test: /\.js$/,//处理js文件
        use: ["./loaders/demo/test1","./loaders/demo/test2"],
      },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  
  mode: "development",
};

运行npx webpack

先执行2（1s之后反应）在执行1

同步loader中不能进行异步操作：

规则中先执行1 在执行2