webpack-配置参数解析（中）

2021-05-24

字数统计: 1.2k字 | 阅读时长≈ 5分钟

module

webpack中用require或import引入的都叫module，通过对module选项的配置可以让loader加载对应的模块

noParse

当使用commonjs模块生成，修改src/index.js文件引入library

import { webpackSay } from '../library'; // 引入 library 的 webpackSay 方法

document.write('fall in love with webpack！');
// 按需引入 girl.js 文件
import('./girl').then((result) => {
  result.default();
  webpackSay(); // 执行 webpackSay 方法
});

此时打包编译，代码用import或require导入时，webpack会再编译一遍library，严重影响性能，故可以使用module.noParse忽略对library模块的再次编译

const path = require('path');

module.exports = {
  mode: 'development', // 测试环境
  context: path.resolve(__dirname, './src'), // context 上下文指向 src 目录
  entry: () => new Promise((resolve) => resolve('./index.js')), // 利用方法返回一个异步的入口
  output: {
    path: path.resolve(__dirname, './lib'), // 修改输出路径为 “sy_webpack-config/lib”
    publicPath: './lib/', // 配置公共路径
    filename: "[name].js", //配置入口最后生成输出文件名称
    chunkFilename: "[name].[chunkhash:8].js" //让它的组成为 `名称.8位内容的hash值.js`
  },
  module:{
      noParse: /(library)/,//过滤掉library模块
  }
};

rules

模块rule的集合。当创建模块时，匹配请求的rule数组，修改模块的创建方式，并对模块应用选择对应的loader或修改解析器

module.exports = {
      ...
    module: {
        noParse: /(library)/, // 过滤掉 library 模块
        rules: [
            {
                test: /.vue$/, // 设置当前模块的规则
                use: 'vue-loader', // 设置当前模块的加载器
            },
            {
                test: /\.(sass|scss)$/, // 设置当前模块的规则
                use: [ // 设置当前模块的加载器
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            config: {
                                path: path.resolve(__dirname,"./postcss.config.js")
                            }
                        }
                    },
                    "sass-loader"
                ]
            }
        ]
    },
   ...
};

条件Condition

有两种输入值:

resource：请求文件的绝对路径,属性test、include、exclude、resource对resource匹配
issuer：被请求资源模块文件的绝对路径，代表导入时的模块路径。属性issuer对issuer匹配

如：从app.js导入./style.css模块，则resource为./style.css，issuer为app.js

Rule.test

为Rule.resource.test的简写。提供了Rule.test就不能再提供Rule.resource

字符串：匹配输入必须以提供的字符串开始，目录绝对路径或文件绝对路径

{
    test: path.resolve(__dirname,'./src/notice-webpack.vue'), // 字符串匹配一个文件，绝对路径
    use: 'vue-loader',
},

正则表达式，使用test来验证输入的值

{
  test: /\.vue$/,
  use: 'vue-loader',
},

函数：调用输入的函数，必须返回一个真值匹配

{
    test: resource => /\.vue$/.test(resource),
    use: 'vue-loader',
},

条件数组：至少有一个匹配

{
    test: [ /\.vue$/ ],
    use: 'vue-loader',
},

对象：匹配所有属性，每个属性都有一个定义行为

{
    test: {
      test: /\.vue$/
    },
    use: 'vue-loader',
},

当webpack加载到不支持的文件，在执行module.build时会到module.rule中找可以解析此文件的loader。当在webpack.config.js中配置了此loader，webpack就会利用以上的形式找到它，以此来加载此文件。

Rule.issuer

用来与发布者的request对应的模块项匹配，其用法与Rule.test一致

//只需要用 vue-loader 加载 sy_webpack-config/src/index.js 下的 notice-webpack.vue 文件

{
test: /\.vue$/,
issuer: [
    // 发布者 issuer 是 index.js 或 notice-webpack.vue 的时候才让加载器加载
    path.resolve(__dirname,"./src/index.js"),
    path.resolve(__dirname,"./src/notice-webpack.vue"),
],
use: 'vue-loader',
}

Rule.resourceQuery

webpack 加载获取加载器的时候，会用当前模块来匹配resourceQuery条件，表示一个请求资源的参数，用法跟Rule.test一样。

//当 resourceQuery 有值的时候才匹配 vue-loader
{
     test: /\.vue$/,
     use: 'vue-loader',
     resourceQuery: (query)=>{
        console.log(query)
        return true;
     }
 },
//同时修改入口文件
import noticewebpack from './notice-webpack.vue?inline'; // 导入noticewebpack组件，inline即为resourceQuery

Rule.use

利用use指定当前加载器

可配置的值与Rule.test一致

字符串形式
对象形式：当loader需要传递参数时使用
数组形式：当需要多个loader加载时使用
方法形式：当需要获取某些信息当作参数时使用

{
   test: /\.vue$/,
   use: (info)=>[
     {
       loader: 'vue-loader', // 使用 vue-loader 去加载
          options: {}
     }
   ]
 },

其中，info可以写为：

compiler：当前webpack的compiler对象
issuer：当前模块发布者的路径
realResource：当前module的绝对路径
resource：当前module的路径

Rule.loader & Rule.options

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

参数Rule.use跟Rule.loader关系就像是Rule.test跟Rule.resource关系一样

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！