早期

• grunt
• gulp

主流

• webpack
• parcel

Webpack 基本使用

Webpack 中的插件

配置 Webpack 中的 devServer

webpack 中的 loader

webpack 打包发布

SourceMap

<aside> 💡 实际开发中需要自己配置 webpack 吗？

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

</aside>

路径中的@符号表示什么 在看别人使用webpack打包的项目代码时，经常会看到在路径中引用@符号，如下所示：

<aside> 💡

</aside>

import  conOne from '@/views/conOne.vue'
这其实利用了webpack的resolve.alias特性，webpack.config.js的配制代码如下，在webpack打包时，会把路径引用中的@符号，转换为相对应的路径。

const path = require("path"); function resolve(dir) { return path.join(__dirname, '..', dir); }

module.exports = { resolve: { extensions: ['*', '.js', '.vue'], alias:{ 'vue$': 'vue/dist/vue.common.js', '@': resolve('src') } } }