深入浅出webpack学习(4)--module

Module

module的配置如何处理模块。

配置Loader

rules 配置模块的读取和解析规则, 通常用来配置loader, 其类型是一个数组, 数组里每一项都描述了如何去处理部分文件。

配置一项rules大致通过以下方式:

1. 条件匹配: 通过test、include、exclude三个配置来命中Loader要应用的规则文件。
2. 应用规则: 对选中后的文件通过use配置项来应用loader,可以应用一个loader或者按照从后往前的顺序应用一组loader。同时还可以分别给loader传入参数。
3. 重置顺序: 一组loader的执行顺序默认是从有道左执行,通过exforce选项可以让其中一个loader的执行顺序放到最前或者是最后。

例子:

module: {
    rules: [
        {
            test: /\.js$/, 
            use: ['babel-loader?cacheDirectory'],
            include: path.resolve(__dirname, 'src')
        },
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            exclude: path.resolve(__dirname, 'node_modules')
        }
    ]
}

在loader需要传入很多参数的时候,我们还可以通过一个object来描述,如:

use: [
    {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true
        },
         // enforce:'post' 的含义是把该 Loader 的执行顺序放到最后
        // enforce 的值还可以是 pre,代表把 Loader 的执行顺序放到最前面
        enforce:'post'
    }
]

上面例子中 test、include、exclude这三种命中文件的配置项只传入一个字符串或者是正则,其实他们还支持数组类型

{
    test: [/\.jsx?$/, /\.tsx?$/],
    include: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'test')
    ],
    exclude: [
        path.resolve(__dirname, 'node_modules'),
        path.resolve(__dirname, 'bower_modules')
    ]
}
noParse

noParse可以让webpack忽略对部分没有采用模块化的文件的递归解析和处理,这样做的好处是能提高构建性能。原因是一些库例如jq这些,庞大又没有采用模块化标准,让webpack去解析是没有意义的。
noParse是可选配置下,类型是:RegExp, [RegExp], function其中一个。

noParse: /jquery|chartjs/

noParse: (content) => {
    //content代表一个模块的文件路径
    //返回true of false
    return /jquery|chartjs/.test(content)
}
parser

因为webpack是以模块化的JavaScript文件为入口,所以内置了对模块化JavaScript的解析功能。支持AMD、Commonjs、SystemJs、ES6。parse属性可以更细粒度的配置哪些模块语法要解析,哪些不解析。和noParse的区别在于parser可以精确道语法层面上。noParse只能控制哪些文件不进行解析。

module: {
  rules: [
    {
      test: /\.js$/,
      use: ['babel-loader'],
      parser: {
      amd: false, // 禁用 AMD
      commonjs: false, // 禁用 CommonJS
      system: false, // 禁用 SystemJS
      harmony: false, // 禁用 ES6 import/export
      requireInclude: false, // 禁用 require.include
      requireEnsure: false, // 禁用 require.ensure
      requireContext: false, // 禁用 require.context
      browserify: false, // 禁用 browserify
      requireJs: false, // 禁用 requirejs
      }
    },
  ]
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值