美文网首页
Webpack resolve

Webpack resolve

作者: yftx_ | 来源:发表于2017-03-03 17:08 被阅读1005次

Resolve

文档地址

该配置项用来解决依赖module查找的。webpack提供了默认参数,
可以对默认参数进行更改来处理相关依赖。
可以查看Module Resolution了解resolver的查找规则。

Resolve(object)

配置依赖的modules被解决的方式。比如,当基于ES2015语法调用import "lodash"
resolve配置可以改变webpack查找lodash的路径。

resolve.alias(object)

创建alias可以使导入模块更方便。比如,映射通用文件夹src

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

使用相对路径的方式导入依赖

import Utility from '../../utilities/utility';

使用alias的方式导入依赖

import Utility from 'Utilities/utility';

使用$符号可以定位到具体的js文件

alias: {
  xyz$: path.resolve(__dirname, 'path/to/file.js')
}

配置过定位文件后可以按照如下示例使用

import Test1 from 'xyz'; // Success, file.js is resolved and imported
import Test2 from 'xyz/file.js'; // Error, /path/to/file.js/file.js is invalid
alias: import "xyz" import "xyz/file.js"
{} /abc/node_modules/xyz/index.js /abc/node_modules/xyz/index.js
- - -
- - -
- - -
- - -
- - -

相关文章

  • node 模块加载和webpack resolve

    node 模块加载和webpack resolve node module webpack resolve nod...

  • webpack优化相关

    配置 resolve.modules webpack 的 resolve.modules 是用来配置模块库(即 n...

  • Webpack resolve

    Resolve 文档地址 该配置项用来解决依赖module查找的。webpack提供了默认参数,可以对默认参数进行...

  • resolve.extensions

    Webpack uses resolve.extensions to generate all the possi...

  • vue 快速定义位置

    webpack.base.conf.js 举例子: resolve: { extensions: ['.js','...

  • 深入浅出Webpack 摘要 Resolve

    Resolve Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块。Resolve 配置 Webpa...

  • webpack 入门 2

    多页应用打包 例如 webpack.config.js 内容 7.resolve 配置(webpack 如何寻找模...

  • 2.4.4 modules配置

    2.4.4 modules配置 问题一:modules配置? resolve.modules配置 Webpack ...

  • webpack resolve配置

    resolve 是配置解析模块规则主要讲解这个 alias extensions modules配置使用 alia...

  • 常见错误解决

    1、Cannot resolve module 'babel-loader' 在控制台中运行命令“webpack”...

网友评论

      本文标题:Webpack resolve

      本文链接:https://www.haomeiwen.com/subject/sysrgttx.html