webpack.config.js中mudule的配置

原创于 2018-05-10 18:31:50 发布 · 1.5k 阅读

CC 4.0 BY-SA版权

11 篇文章

订阅专栏

本文介绍了webpack配置中module的rules属性的使用方法，包括如何通过test属性指定文件匹配规则，以及如何利用use属性定义loader及其执行顺序。同时，还探讨了简写形式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mudule是对于不同的模块的处理规则。

module的rules属性代表不同的处理规则。rules是一个对象。对象的属性有test、use、exclude、include。

use属性是对象数组。数组的话，是从后往前解析。

对象的参数为loader/options。

1是2的简写形式。3是4的简写形式。

module:{
  	rules:[
  	{
  		test:/\.css$/,
  		use:[
  		"style-loader",
  		"css-loader"
  		]
  	}]
  },

module:{
  	rules:[
  	{
  		test:/\.css$/,
  		use:[{loader:"style-loader"},{loader:"css-loader"}]
        }]
}

 {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude:/node_modules/
      },

 {
        test: /\.js$/,
        use[{loader: 'babel-loader'}],
        exclude:/node_modules/
      },

总结：

a. Rule.loader是Rule.use[{loader}简写

Rule.options是Rule.use[ {loptions}]缩写

参考链接参考