loader是webpack中模块解析器,例如常见的css-loader:

    1.   module: {
    2.     rules: [
    3.       {
    4.         test: /\.css$/,
    5.         use: [ 
    6.           'css-loader'
    7.         ]
    8.       }
    9. }

    识别loader

    有些时候我们想自定义loader,但是webpack默认是在node_modules目录下寻找loader,webpack将无法识别,因此我们要先配置webpack如何识别到我们写的loader:

    1.resolveLoader.moduels

    1. resolveLoader: {
    2.     modules: ['node_modules', 'loaders'] // 先从node_modules中查找,没有从loaders文件夹中查找loader1.js  },
    3.   module: {
    4.     rules: [
    5.       {
    6.         test: /\.js/,
    7.         use: ['loader1']
    8.       }
    9.     ]
    10.   }

    2.resolveLoader.alias

    1. resolveLoader: {
    2.     alias: {// 绝对路径
    3.       loader1: path.resolve(__dirname, 'loaders', 'loader1.js')
    4.     }
    5.   },

    3.loader的绝对路径

    1. module: {
    2.     rules: [
    3.       {
    4.         test: /\.js/,
    5.         use: [path.resolve(__dirname, 'loaders', 'loader1.js')]
    6.       }
    7.     ]
    8.   }

    4.npm link

    之前写过一篇npm link 的文章:npm link

    自定义简单loader

    今天我们实现个简单的loader,将js中的A变成B,我们先新建一个test-loader目录,新建index.js:

    1. function replace(source) {
    2.     return source.replace(/A/g, 'B');
    3. }
    4. module.exports = function (content) {
    5.     return replace(content);
    6. };

    接着创建package.json:(利用npm link方式)

    1. {
    2.   "name": "test-loader",
    3.   "version": "1.0.0",
    4.   "description": "",
    5.   "main": "index.js"
    6. }

    然后将test-loader和真正开发的目录关联起来,最后将test-loader配入webpack.config.js中:

    1. module: {
    2.         rules: [
    3.             {
    4.     test: /\.js$/,
    5.     use: ['test-loader']
    6.             }
    7.         ]
    8.     },

    运行项目,就可以将项目中的A变成B。

    回到顶部
    我要评论

    所有评论

      相关文章