11月24, 2016

webpack之modulesDirectories

我的主管是一个相对保守的人,她觉得用bower比较适合我厂。

理由是npm包太多太杂,然后可能有bug,或者UI上的区别。这时候可能做覆盖并不是最佳选择,也许在它原有代码基础上做修改会更适合一些。

当然我个人是npm派,觉得要与时俱进,但我认同她的观点。

众所周知,在node中,

require("xxx")

xxx这个模块肯定在node_modules中,这个无法变更成其他目录的

但从node到前端后,通过webpack,我们就可以指定xxx的目录。当然了,它有两种方式。

  • 通过resolve.alias
resolve: {
    // require时省略的扩展名,如:require("module") 不需要module.js
    extensions: ["", ".js", ".vue"],
    // 别名,可以直接使用别名来代表设定的路径以及其他
    alias: {
        iview: path.join(__dirname, "src/libs/iview"),
        filter: path.join(__dirname, "src/filters"),
        components: path.join(__dirname, "src/components")
    }
}
  • 通过resolve.modulesDirectories
resolve: {
    modulesDirectories: ["src/libs", "node_modules"]
}

很明显,下面的方式更优。因为通常我们都是把所有的组件放在同一个目录下,如果以别名机制来写的,那要写上很多个才行,而modulesDirectories只要写一个即可。

本文链接:www.my-fe.pub/post/webpack-modulesDirectories.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。