webpack之module

简介

module决定了如何处理项目中的不同类型的模块。

module基本的配置

module: {
  rules: [
    {
      test: /\.jsx?$/,  // resource中正则匹配
      include: [ // resource中查找配置的目录
        path.resolve(__dirname, 'src')
      ],
      use: [ // 引用的loader
        'babel-loader'
      ]
    }
  ]
}

常用的一些配置

test

正则表达式判断语句,用来匹配处理模块的后缀名

include

include主要是匹配查找的目录

exclude

exclude和include的作用相反,主要是剔除webpack要查找的目录

use

use作为一个数组,里面的参数可以是字符串或是对象

// 字符串
use: [
  'style-loader',
  'css-loader'
]

// 对象
use: [
  'style-loader',
  {
    loader: 'css-loader',
    options: {
      importLoaders: 1
    }
  }
]
其中options参数怎么用,这个要视具体插件的情况而定。具体的用法可以在使用时参考npmjs.com

oneOf

oneOf,当规则匹配时,只使用第一个匹配规则。

eg:

{
  test: /.css$/,
  oneOf: [
    {
      resourceQuery: /inline/, // foo.css?inline
      use: 'url-loader'
    },
    {
      resourceQuery: /external/, // foo.css?external
      use: 'file-loader'
    }
  ]
}

补充

如果需要在css中通过相对路径的形式引入图片,那么需要在url-loader,file-loader中引入outputPath

{
  test: /\.(jpe?g|png|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192, // 小于8k的图片自动转为base64格式,并且不会存在实体图片
        outputPath: 'images/'  // 图片打包后存放的目录
      }
    }
  ]
}

引用的时候如下:

.wrap {
  font-size: 14px;
  background: url(../images/bg.png) no-repeat;
}

如果在html中引入图片不想通过request的形式,那么可以通过引用插件html-withimg-loader来实现。

{
  test: /\.(htm|html)$/,
  use: 'html-withimg-loader'
}

使用的时候如下:

<div class="wrap">
  <img src="images/ng.png" alt="" title="" />
</div>