vue基础知识(十四)——webpack

1.当前Web开发面临的困境

• 文件依赖关系错综复杂
• 静态资源请求效率低
• 模块化支持不友好
• 浏览器对高级Javascript特性兼容程度较低
• ets…

2.webpack 概述

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。
webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。其官网为：https://www.webpackjs.com/

3.webpack的基本使用

3.1 创建列表隔行变色项目

3.2 在项目中安装和配置webpack

3.3 配置打包的入口与出口

3.4 webpack的自动打包功能

3.5 配置 html-webpack-plugin 生成预览页面

3.6 配置自动打包相关的参数

3.7 webpack中的加载器

3.7.1 通过 loader 打包非js模块

3.7.2 loader的调用过程

3.8 webpack 中加载器的基本使用

3.8.1 打包处理 css 文件

3.8.2 打包处理 less 文件

3.8.3 打包处理 scss 文件

3.8.4 配置 postCSS 自动添加 css 的兼容前缀

自动为有兼容性的样式添加浏览器的前缀~

3.8.5 打包样式表中的图片和字体文件

3.8.6 打包处理 js 文件中的高级语法

4.Vue单文件组件

4.1 传统组件的问题和解决方案

- 问题：

• 全局定义的组件必须保证组件的名称不重复
• 字符串模版缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的 \
• 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS明显被遗漏
• 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器（如：Babel）

- 解决方案：

针对传统组件的问题，Vue提供了一个解决方案——使用Vue单文件组件。

4.2 Vue单文件组件的基本用法

单文件组件的组成结构

• template 组件的模版区域
• script 业务逻辑区域
• style 样式区域

<template>
     <!-- 这里用于定义Vue组件的模版内容 -->
</template>
<script>
     // 这里用于定义Vue组件的业务逻辑
     export default {
        data: () { return {}  },   // 私有数据
        methods: {}   // 处理函数
        // ... 其他业务逻辑
     }
</script>
<style scoped>
    /* 这里用于定义组件的样式 */
</style>

4.3 webpack 中配置 vue 组件的加载器

4.4 在 webpack 项目中使用 vue

4.5 webpack 打包发布

运行npm run build命令，生成一个dist文件，dist里面有bundle.js和index.html，点击里面的index.html就可以在浏览器中看到页面。