webpack属性

最新推荐文章于 2022-09-06 17:43:08 发布

weixin_42182143

最新推荐文章于 2022-09-06 17:43:08 发布

阅读量431

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42182143/article/details/103779655

本文深入探讨Webpack的配置细节，包括如何为引入的包设置别名，简化路径引用；配置开发服务器，利用不同源码映射选项进行高效调试，如source-map、eval-map等，提升开发体验。

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

为引入包起别名

resolve: {
    alias:{  // 代号
      bootstrap: 'bootstrap/dist/css/bootstrap.css'
     }
}
// home.js
import 'bootstrap'
// 映射到'bootstrap/dist/css/bootstrap.css'这个路径

配置server

添加源码映射

方便调试

devtool: 'source-map' | 'eval-map' | 'cheap-module-source-map' | 'cheap-module-eval-source-map'

source-map: 单独生成一个source-map文件，出错会标识，大而全
eval-map:不会生成一个source-map文件，但是可以标识报错的行和列
cheap-module-source-map:不会标识列，会单独生成一个source-map文件
cheap-module-eval-source-map:不会生成一个source-map文件，集成在打包文件里，标识行，无列