一、你必须先认识下Webpack?

在前面学习的NodeJS中，我们可以通过require、exports去加载各种资源和模块，但是在前端，我们并不能直接去做，所以我们得借助模块加载器。比如：broserify（只能加载js）、Webpack。

Webpack 是一个模块打包工具，也被称为模块加载器。它将一堆文件中的每个文件都作为一个模块，并找出它们的依赖关系，最终将它们打包为可部署的静态资源。

微信截图_20210727160330.png

比如：一些不能直接在浏览器中运行的模块，我们就可以通过webpack把它打包成一个文件，这样就可以通过

Webpack 更加强大之处在于：通过“loader”，我们可以配置 Webpack 以任何方式去转换所有类型的文件。常见的比如： css-loader、url-loader、html-loader、babel-loader…

转换 ES2015，CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块；
可以选择在编译之前检验你的源代码；
将 Jade 模版转换为纯 HTML 并且嵌入 Javascript 字符串中；
将 SASS 文件转换为纯 CSS，然后将其转换成 JavaScript 片段，将生成的 CSS 作为 <style> 标签插入页面；
处理 HTML 或者 CSS 中引用的图片，移动到配置的路径中，并且使用 md5 hash 重命名。

二、vue-loader是什么?

vue-loader 是一个 Webpack 的 loader，可以将.vue文件转化成普通的js模块来执行。

2.1 模块化开发思想

简单的目录结构：

微信截图_20210727160432.png

App.vue内部构成:

.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块：

<template>用于放置html</template>

每个 .vue 文件最多包含一个 <template> 块。

内容将被提取为字符串，将编译并用作 Vue 组件的 template 选项。

<script>js代码</script>

默认语言：js (在检测到 babel-loader 或 buble-loader 配置时自动支持ES2015)。每个 .vue 文件最多包含一个 <script> 块。脚本必须导出 Vue.js 组件对象。也可以导出由 Vue.extend() 创建的扩展对象，但是普通对象是更好的选择。

<style>用于放置css样式</style>

默认语言：css。

一个 .vue 文件可以包含多个 <style> 标签。

<style> 标签可以有 scoped 或者 module 属性将样式封装到当前组件。具有不同封装模式的多个 <style> 标签可以在同一个组件中混合使用。

将会使用 style-loader 提取内容，并通过 <style> 标签动态加入文档的 <head> 中

微信截图_20210727160501.png

vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 CommonJS 模块，module.exports 出一个 Vue.js 组件对象。

vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，我们也可以使用 SASS 语法或LESS语法编写样式。

三、基于vue-cli创建使用vue-loader项目

vue-cli：快速构建单页应用的脚手架，这里面统一集成了webpack 、npm 、nodejs 等等。

什么是脚手架？

不需要我们自己一步步去搭建项目结构，已经给我们提供了最基本的项目结构

3.0 使用淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

riny.net/2014/cnpm/ npm 转 cnpm

3.1 安装脚手架

使用cnpm全局安装vue-cli（前提是已经安装了nodejs），在cmd中输入一下命令：

cnpm install -g vue-cli

查看vue版本，验证是否安装成功： vue --version

3.2 创建项目

vue init webpack firstdemo

firstdemo 项目名称，这个名字自己随便取;

命令输入后，会进入安装阶段，需要用户输入一些信息:

Project name (firstdemo) 项目名称，可以自己指定，也可直接回车，按照括号中默认名字;

Project description (A Vue.js project) 项目描述，也可直接点击回车，使用默认名字;\

Author 作者；

Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了；

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了；

Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用；

Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手可以考虑不用，一般用于正式项目开发中

Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，NO

Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试，NO

3.3 项目结构分析

微信截图_20210727161158.png

bulid 里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件

config 配置文件，执行文件需要的配置信息

src 资源文件，所有的组件以及所用的图片都是在这个里面

微信截图_20210727161310.png

微信截图_20210727161405.png

3.4 安装需要的模块

因为是初始项目，还没有任何模块，所以要依照根目录下的package.json文件中依赖的模块去安装需要安装所有的模块。

切换到项目目录 cd firstdemo

安装依赖模块 npm install

安装完成后，在项目工程目录下面会多出一个文件夹：node_modules。\

运行项目： npm run dev

微信截图_20210727161553.png

程序运行过程分析：

微信截图_20210727161052.png

【vue-loader 】进阶Vue｜8月更文挑战