webpack-配置参数解析（下）

webpack
字数统计: 585字   |   阅读时长≈ 2分钟

resolve

选项resolve可设置模块如何被解析

resolve.alias

创建import或require中间request的别名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//使用alias前
import noticewebpack from './notice-webpack.vue'; // 导入 noticewebpack 组件

//设置module中resolve
module.exports = {
  ...
  resolve: {
        alias: {
            '$NOTICE': path.resolve(__dirname, './src/notice-webpack.vue') // 设置一个别名替换 ./src/notice-webpack.vue 文件
        }
    },
  ...
}

//设置后
import noticewebpack from '$NOTICE'; // 导入 noticewebpack 组件

resolve.mainFields

当从npm包中导入模块时，mainFields决定在package.json中使用哪个字段导入模块。根据webpack配置中指定的target不同，默认值也不同

  • 当target为：webworker、web或没有指定时，默认值为：
1
2
3
4
5
6
module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main'], // 顺序从左到右加载
  },
};
  • 其他target，默认值为：
1
2
3
4
5
6
module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'main'], // 顺序从左到右加载
  },
};

resolve.extensions

自动解析确定的扩展，即确定在加载模块时能省略后缀的文件，默认值为['.wasm','.mjs','.js','.json']

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//配置前
import noticewebpack from './notice-webpack.vue'; // 导入 noticewebpack 组件

//配置extensions参数
 ...
 resolve: {
        alias: {
            '$NOTICE': path.resolve(__dirname, './src/notice-webpack.vue')
        },
        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue'] // 配置后缀自动解析
    },
 ...

// 配置后
import noticewebpack from './notice-webpack'; // 导入 noticewebpack 组件

resolve.enforceExtension

若设置为true则不允许有无扩展名的文件

resolve.modules

告知webpack解析模块时应该搜索的目录，绝对路径和相对路径均可使用

添加一个目录到模块搜索目录，此目录优先于node_modules/目录进行搜索的话，配置如下：

1
modules: [path.resolve(__dirname, 'src'), 'node_modules'];

此时引入src/xxx文件，即import("./demo").then()可以省略.，直接使用import("demo").then()引入

resolveLoader

用于解析webpack的loader包

默认值为：

1
2
3
4
5
{
  modules: [ 'node_modules' ], // 默认的 loader 搜索目录
  extensions: [ '.js', '.json' ], // 默认的 loader 后缀自动解析
  mainFields: [ 'loader', 'main' ] // 默认的 loader 模块入口
}

plugins

插件可以时一个object或function，故plugins为object或function的集合

1
plugins: [new (require('vue-loader').VueLoaderPlugin)()];
  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • © 2020-2024 Aweso Lynn
  • PV: UV: