webpack - 如何处理公共资源的引用路径?

问题描述

问 题

有3种情境：
1.对css预处理器中variable文件的引用，下级目录对其进行引用要写许多../../。尝试在最顶层的css文件中引入，发现对下级的并无效果。(这里webpack用了 ExtractTextPlugin，整合css文件，不知是否有影响)
2.对全局的静态资源引用，比如说在assert文件中存放了图片之类的资源，下级进行引用一样要写许多../../。查到可以用url-loader或是CopyWebpackPlugin,改变打包文件目录，但是如果用了url-loader生成dataurl这种用法，该如何使用？
3.在一个文件夹里比如说common里放了一些多级目录都用到的公共组件，这个时候引用一样需要写许多../../。但是js文件打包出来就是一个bundle，个人看了下似乎可以用dll的方式，但是这样和发一个包有点类似，一旦更改重新打包比较不方便。是否有什么合适的方式？

解决方案

是觉得路径写的太麻烦么？

那就通过alias来配置下.

    resolve: {
        alias: {
            assets: path.resolve(__dirname, 'assets')
        }
    }

然后在你业务文件中直接引用：

    import from 'assets/xxx/xxx';

这篇关于webpack - 如何处理公共资源的引用路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！