webpack配置自定义loader

webpack配置自定义loader:

方法一：

设置自定义loader模块引入路径， 引入my-loader时去对应路径获取loader

// webpack.config.js
module.exports= {
  resolveLoader: {
    alias: {
      'my-loader': path.resolve('./loaders/my-loader.js')
    }
  },
  module: {
     rules: [
     {
		test: /\.css$/,
		use: [ 'style-loader', 'css-loader', 'my-loader' ]
	 }
	 ]
  }
}

方法二：

直接去对应路径获取loader

// webpack.config.js
module.exports= {
  module: {
     rules: [
     {
		test: /\.css$/,
		use: [
		  { loader: 'style-loader' },
		  { loader: 'css-loader' },
		  {
		    loader: path.resolve(__dirname, './loaders/my-loader.js')
		    options: { ... }
		  }
		]
	 }
	 ]
  }
}

方法三：

添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索：

module.exports= {
  resolveLoader: {
    modules: [path.resolve(__dirname, './loaders'), 'node_modules']
  }
}