webpack-module配置详解

1、rules

• 作用：条件匹配，用于匹配加载器，指定模块解析规则（css、js、vue、图片文件等等）

• 使用方式：（使用use加载、使用loader加载）

  rules: [
      // 方式一
      {
  	test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      // 方式二
      {
  	test: /\.s[a|c]ss$/,
      loader: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      },
  ]
  

  rules是一个数组，指定加载多个Rule，Rule当中的loader是use中loader的简写。所以，上述方式一可以改写为：

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

• 其余参数：

  include：目录名，可以是字符串、数组，表示哪些目录下某些文件需要解析

  exclude：目录名，可以是字符串、数组，表示哪些目录下某些文件不需要解析

  enforce： pre-把该loader的执行顺序放到最前面，post-把该loader的执行顺序放到最后面

  parser：配置哪些模块语法需要解析哪些不解析（amd、commonjs、system、harmony、requireInclude、requireEnsure、requireContext、browserify、requireJs——true / false）

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

  rules: [
      {
      test: /\.(png|jpe?g|gif|svg)$/,
      use: [
          {
              loader: "url-loader",
              options: {
                  // 限制 8192字节以下的图片文件才使用该加载器
  				limit: 8192, 
                  // 对于超过 limit限制的，按照name的命名方式
                  name: 'img/[name].[hash:7].[ext]',
                  // 相关路径
                  outputPath: "",
                  publicPath: ""
              }
          }
      ]
      }
  ]
  

  优先级：exclude > include > test ， 所以每次加载前，都会先查找是否有文件需要排外或者特殊处理，然后才开始解析。

2、loaders

• 作用：与rules一致，用于解析模块

• 使用方式：和rules相同

  loaders: [
      // 方式一
      {
      test: /\.css$/,
      loader: ['style-loader' , 'css-loader']
      },
      // 方式二
      {
  	test: /\.s[a|c]ss$/,
      loader: 'style-loader!css-loader!sass-loader'
      }
  ]
  

• 其它参数（与rules一致）

PS. loader的解析原则：从右往左，从下往上