在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为_模块_。

每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的_模块_提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。官网链接地址

1、noParse

RegExp | [RegExp]

RegExp | [RegExp] | function（从 webpack 3.0.0 开始）

防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制。忽略大型的 library 可以提高构建性能。

制定一个正则，然后遇到匹配的就不解析，会节省时间。(不常用)

webpack.config.js

const webpack = require('webpack');
const env = process.env.NODE_ENV || 'production';

const config = {
    mode: env,
    module: {
     // noParse: /jquery|lodash/
     // 从 webpack 3.0.0 开始
     noParse: function(content) {
       return /jquery|lodash/.test(content);
     }
    },

}

module.exports = config;

2、rules

主要就是解析不同的模块，根据不用的文件使用不同的 loader。

rules 为一个数组，创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。

2.1 ?enforce

可能的值有：”pre” | “post”

更改了loader的执行顺序，具体参见下面的demo
制定loader的分类，不对该参数做配置时表示使用normal loader。
这个地方，说一下，官方翻译的有点过头了
另外支持一种inline loader,适用于内联的import/require。
loaders按照post，inline，normal，pre顺序执行。
normal类型的loader使用!前缀
normal和pre类型的loader使用-!前缀
normal，post，pre类型的loader使用!!前缀
不应该使用行内 loader 和 ! 前缀，因为它们是非标准的。它们可在由 loader 生成的代码中使用。

2.2 ?resource

既可以提供 Rule.resource 选项，也可以使用快捷选项 Rule.test，Rule.exclude 和 Rule.include。

设置匹配条件： 我们可以通过test、incluede、exclude 来筛选我们要编译处理的文件。

? ? 2.2.1? Rule.test

设置匹配，

Rule.test 是 Rule.resource.test 的简写。如果你提供了一个 Rule.test 选项，就不能再提供 Rule.resource。

? ? 2.2.2 Rule.exclude

不会编译被exclude匹配到的文件

Rule.exclude 是 Rule.resource.exclude 的简写。如果你提供了 Rule.exclude 选项，就不能再提供 Rule.resource。

? ? 2.2.3 Rule.include

只编译被include匹配到的文件

Rule.include是 Rule.resource.include 的简写。如果你提供了 Rule.include 选项，就不能再提供 Rule.resource。

2.3 ?条件

条件可以是这些之一：

• 字符串：匹配输入必须以提供的字符串开始。是的。目录绝对路径或文件绝对路径。
• 正则表达式：test 输入值。
• 函数：调用输入的函数，必须返回一个真值(truthy value)以匹配。
• 条件数组：至少一个匹配条件。
• 对象：匹配所有属性。每个属性都有一个定义行为。

{ test: Condition }：匹配特定条件。一般是提供一个正则表达式或正则表达式的数组，但这不是强制的。
{ include: Condition }：匹配特定条件。一般是提供一个字符串或者字符串数组，但这不是强制的。
{ exclude: Condition }：排除特定条件。一般是提供一个字符串或字符串数组，但这不是强制的。
{ and: [Condition] }：必须匹配数组中的所有条件
{ or: [Condition] }：匹配数组中任何一个条件
{ not: [Condition] }：必须排除这个条件

2.4 ?loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

在 Webpack 里其实只能识别 js，但是实际项目中不可能只用到 js， 像css、sass 和 less 等经常会用到，这个时候就需要 Loader 来解析这些文件，转化成 js，如此 Webpack 就可以识别了

Rule.loader 是 Rule.use: [ { loader } ] 的简写。

2.5 ?use

传递字符串（如：use: [ “style-loader” ]）是 loader 属性的简写方式

（如：use: [ { loader: “style-loader “} ]）。

以上列出了常用的关于module的几个功能，想查看具体更多内容，参见官网

module: {
  rules: [
      {
        // 匹配less文件
        test: /\.css$/,
        // 匹配多个文件
        test:[
          /\.less$/,
          /\.css$/
        ],
        // 不会编译 node_modules 目录下的文件
        exclude: path.resolve(__dirname, 'node_modules'),
        // 只编译中src目录里的文件
        include: path.resolve(__dirname, 'src')
         // 匹配类似foo.css?inline的带有?inline的css
        resourceQuery: /inline/,
    },
    {
        // ?cacheDirectory 表示传给 babel-loader 的参数，
        // 用于缓存 babel 编译结果加快重新编译速度
        use: ['babel-loader?cacheDirectory'],
        // 这种方法同上面的方法，当loader需要传入很多参数时
        // 可以使用options对象
        user:[
            {
                loader:'babel-loader', 
                options:{ // 将query形式转换成options对象
                    cacheDirectory:true
                }
            }
        ],
        // 处理顺序为从后到前，即先交给 less-loader 处理，
        // 再把结果交给 css-loader 最后再给 style-loader。
        use: ['style-loader', 'css-loader', 'less-loader'],

    },
    {
         // 匹配less文件
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
        //将安照从左往右顺序执行loader。
        enforce: 'pre'
    },
    {
        test: /.css$/,
        //只使用第一个匹配规则
        oneOf: [
            {
             // 匹配类似foo.css?inline的带有?inline的css
                resourceQuery: /inline/,
                use: 'url-loader'
            },
            {
             // 匹配类似foo.css?external的带有?external的css
                resourceQuery: /external/,
                use: 'file-loader'
            }
        ]
    }
  ]
}

详细说明参见官方文档

参考链接：

• webpack 中文网
• webpack GitHub
• webpack-cli GitHub
• webpack-serve GitHub
• webpack-dev-server GitHub