webpack-手写loader

最新推荐文章于 2024-07-02 19:02:12 发布

zvapour

最新推荐文章于 2024-07-02 19:02:12 发布

阅读量399

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_36303110/article/details/125395963

版权

手写loader

// webpack.config.js
const path = require('path')
module.exports = {
   
  mode: 'development',
  entry: './src/index.js',
  output: {
   
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolveLoader: {
   
    // 方法一： webpack会先去node_modules下找，找不到再去指定目录下找
    modules: ['node_modules', path.resolve(__dirname, 'loaders')],
    // 方法二： 配置别名
    alias: {
   
      loader1: path.resolve(__dirname, 'loaders', 'loader1')
    }
  },
  // 写法一: 
  module: {
   
    rules: [
      {
   
        test: /\.js$/,
        use: [
          'loader1',
          'loader2',
          'loader3'   // 从下往上执行
        ]
      }
    ]
  }
  // 写法二: 
  // loader的分类  pre nromal inline post
  module: {
   
    rules: [
      {
   
        test: /\.js$/,
        use: ['loader1'],
        enforce: 'pre'
      },
      {
   
        test: /\.js$/,
        use: ['loader2'],
        enforce: 'normal'
      },
      {
   
        test: /\.js$/,
        use: ['loader3'],
        enforce: 'port'
      }
    ] // 同样是从上往下执行(可以通过enforce: pre  post 改变执行顺序)