webpack在项目中的一些配置

最新推荐文章于 2025-05-14 11:09:53 发布

qq499576783

最新推荐文章于 2025-05-14 11:09:53 发布

阅读量410

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/qq499576783/article/details/79461312

前端开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Webpack进行模块引入的路径配置，并展示了如何通过别名实现更简洁的import语句。此外，还讨论了create-react-app项目中支持LESS的方法，解决vendor.js哈希值变动的问题，以及如何调整webpack配置来优化静态资源的访问路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. import使用绝对路径

path.resolve（）方法将一系列路径或路径段解析为绝对路径。

在config中配置alias(别名)，如下图所示

alias: {
  '@':path.resolve(__dirname,'../src'),
}

于是可以使用@代替src文件夹

import Routes from '@/route.js';

在实际项目中，我们定义了以下目录

alias: {
    // 通过别名来实现绝对路径
    'components':path.resolve(__dirname,'../src/components'),
    'css':path.resolve(__dirname,'../src/css'),
    'pages':path.resolve(__dirname,'../src/pages'),
    'services':path.resolve(__dirname,'../src/services'),
    'utils':path.resolve(__dirname,'../src/utils'),
},

2. create-react-app支持less的方案

http://blog.youkuaiyun.com/echo008/article/details/78311831

https://segmentfault.com/a/1190000010162614

3. 打包时第三方库vendor.js的hash值变化的问题

https://www.cnblogs.com/myqianlan/p/5626505.html

4. webpack的一些配置

https://www.webpackjs.com/plugins/commons-chunk-plugin/

5.打包后静态资源访问路径不对

在package.json中加入