Skip to content

summary.md

Latest commit

 

History

History
84 lines (59 loc) · 2.51 KB

summary.md

File metadata and controls

84 lines (59 loc) · 2.51 KB

总结

在实际开发中需要自己配置 webpack 吗？

!!! question "常见疑问" 很多初学者会问：我需要从头开始配置webpack吗？

答案是：通常不需要！

  • 实际开发中会使用命令行工具（CLI）一键生成带有 webpack 的项目
  • 开箱即用，所有的 webpack 配置都是现成的！
  • 我们只需要知道 webpack 中的基本概念即可！

!!! tip "常用脚手架工具" - Vue项目: vue create my-project 或 npm create vue@latest - React项目: npx create-react-app my-app - Angular项目: ng new my-app

@ 符号的使用

在以上的笔记中，我们多次使用了 import 关键字导入相关的代码，假如目录层级比较多，就会导致不直观，如下：

import '../../css/index.less'

此时我们可以将 @ 符号定义为源代码的根目录，那么我们引入代码模块的方式就如下以下代码：

import '@/css/index.css'

配置方法

为了实现这个效果，我们需要在 webpack.config.js 中追加如下代码：

resolve: {
    alias: {
        // 告诉 webpack，项目中的代码，@ 符号表示 src 目录
        '@': path.join(__dirname, './src/')
    }
}

使用示例

添加以上配置后，我们在之前 js 文件中都可以使用 @（对应src目录）作为导入文件的相对路径，如下代码：

// 导入css样式
import '@/css/index.css'
// 引入less样式
import '@/css/index.less'
// 导入图片，得到图片文件
import logo from '@/images/logo.png'

学习回顾

通过本系列教程，我们学习了：

  1. webpack基础使用 - webpack的基本概念和配置
  2. webpack插件 - 常用插件的安装和使用
  3. webpack加载器 - 各种loader的配置方法
  4. 打包构建 - 生产环境的打包优化
  5. SourceMap - 调试工具的配置

!!! success "恭喜完成学习！" 现在你已经掌握了webpack的核心知识，可以开始在实际项目中应用这些技能了。

进一步学习

如果你想深入学习前端工程化，建议继续了解：

  • Vite - 新一代前端构建工具
  • Rollup - 专注于库打包的构建工具
  • esbuild - 极速JavaScript打包器
  • Webpack 5 - 最新版本的高级特性

!!! info "关注更多内容" 如果这个教程对你有帮助，欢迎关注作者的更多技术分享！