美文网首页
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
    - - -
    - - -
    - - -
    - - -
    - - -

    相关文章

      网友评论

          本文标题:Webpack resolve

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