vue.js---webpack（三）

我不是女神ヾ 2023-01-07 10:13 48阅读 0赞

# Webpack详解 #

## 认识webpack ##

*  什么是webpack？
    
     *  我们先看看**官方的解释**：从本质上讲，webpack是一个现代的JavaScript应用的**静态模块打包工具**。
     *  我们从两个点来解释上面这句话：**模块**和**打包**。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jdB0dqJB-1610003934925)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/1.png)\]][img-jdB0dqJB-1610003934925_Users_mac_Desktop_vue_vue_1.png]

*  前端**模块化**：
    
     *  目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6.
     *  在ES6之前，我们要想进行模块化开发，就必须**借助于其他的工具**，让我们可以进行模块化开发。
     *  并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
     *  而webpack其中一个核心就是让我们可**能进行模块化开发**，并且会**帮助我们处理模块间的依赖关系**。
     *  而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以当做模块来使用。
     *  这就是webpack中模块化的概念。

## webpack的安装 ##

*  **全局安装**：
 *  首先我们安装webpack需要先安装Node.js，在我之前的文章中有介绍过[如何安装Node.js][Node.js]。
 *  在终端输入node -v就可以查看安装完node.js版本。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-92GrqgjP-1610003934929)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/2.jpg)\]][img-92GrqgjP-1610003934929_Users_mac_Desktop_vue_vue_2.jpg]

*  npm是随Node.js一起下载下来的包管理工具，我们可以使用它来安装webpack。
 *  在mac下依赖包要写入系统重要文件夹里，**需要先获取root权限（如果不获取root权限会出错）**，所以终端先执行如下命令：

sudo -s

*  执行后会出现小钥匙，输入你的密码然后在回车就可以了。
 *  获取完root ，我们开始安装webpack ，执行如下命令：

npm install webpack -g

*  再安装webpcak-cli： webpack-cli用于在命令行中运行webpack，cli即命令行接口（Command Line Interface）

npm install webpack-cli -g

*  检查webpack是否安装：

webpack --version

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q4Ccv7Ap-1610003934930)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/3.jpg)\]][img-Q4Ccv7Ap-1610003934930_Users_mac_Desktop_vue_vue_3.jpg]

*  这里**全局安装**就完成了，到后续还会说到需要**局部安装**。
 *  为什么全局安装后，还需要局部安装呢？
    
     *  在终端直接执行webpack命令，使用的是全局安装的webpack。
     *  当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局本部webpack。

## webpack的起步与配置 ##

### 准备工作 ###

*  我们创建如下**文件**和**文件夹**：
 *  ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5hNJwOwn-1610003934933)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/4.jpg)\]][img-5hNJwOwn-1610003934933_Users_mac_Desktop_vue_vue_4.jpg]

**文件和文件夹解析**：

*  dist文件夹：用于存放之后打包的文件。
 *  src文件夹：用于存放我们写的源文件。
    
     *  main.js：项目的入口文件。具体内容如下：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AjxUBbiI-1610003934938)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/5.jpg)\]][img-AjxUBbiI-1610003934938_Users_mac_Desktop_vue_vue_5.jpg]

*  mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容如下：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8BkJDvI0-1610003934940)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/6.jpg)\]][img-8BkJDvI0-1610003934940_Users_mac_Desktop_vue_vue_6.jpg]

*  index.html：浏览器打开展示的首页html。
    
     *  package.json：通过npm init生成的，npm包管理文件。

### 局部安装webpack ###

*  目前，我们使用的webpack是全局的，如果我们想使用局部webpack来打包呢？
    
     *  因为**一个项目往往依赖特定的webpack版本**，全局的的版本可能和这个项目的webpack版本不一致，导至打包出现问题。
     *  所以通常一个项目，都有自己局部的webpack。
 *  第一步，项目中需要安装自己局部的webpack
    
     *  这里我们让局部安装webpack5.11.1：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gWvehLvR-1610003934940)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/7.jpg)\]][img-gWvehLvR-1610003934940_Users_mac_Desktop_vue_vue_7.jpg]

*  安装完之后，我们目录下多了一个node\_modules文件，我们局部安装webpack就在这里面了：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtUA68CH-1610003934942)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/8.jpg)\]][img-JtUA68CH-1610003934942_Users_mac_Desktop_vue_vue_8.jpg]

第二步，安装局部webpack-cli，通过node\_modules/.bin/webpack运行打包，运行时会提示我们安装webpack-cli，在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。选择yes直接安装。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uKFiJXkk-1610003934945)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/9.jpg)\]][img-uKFiJXkk-1610003934945_Users_mac_Desktop_vue_vue_9.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KdM8MhZC-1610003934949)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/10.jpg)\]][img-KdM8MhZC-1610003934949_Users_mac_Desktop_vue_vue_10.jpg]

### 建立webpack.config.js文件 ###

*  建立webpack.config.js文件进行配置，**注意**：需要entry入口和output出口，其中output中需要两个属性path和filename，path需要的是绝对定位，所以我们又要引入path，通过\_\_dirname动态获取地址，通过resolve进行拼接：

const path = require('path');
    
    module.exports = {
      entry: './src/main.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
    }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7E0aW02e-1610003934950)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/11.jpg)\]][img-7E0aW02e-1610003934950_Users_mac_Desktop_vue_vue_11.jpg]

### package.json中定义启动 ###

*  我们可以通过node\_modules/.bin/webpack运行打包：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vdcFULrc-1610003934951)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/12.jpg)\]][img-vdcFULrc-1610003934951_Users_mac_Desktop_vue_vue_12.jpg]

*  但是，每次敲这么一长串代码感觉很不方便，我们可以在package.json的script中定义自己的执行脚本。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DC0SaG1e-1610003934952)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/13.jpg)\]][img-DC0SaG1e-1610003934952_Users_mac_Desktop_vue_vue_13.jpg]

*  package.json中的script脚本在执行时，会按照一定顺序寻找命令的位置。
    
     *  首先，会寻找本地node\_modules/.bin路径中对应的命令。
     *  如果没找到，回去全局的环境变量中寻找。
     *  只需要通过npm run xxx来执行就可以了。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TKJTbUMi-1610003934954)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/14.jpg)\]][img-TKJTbUMi-1610003934954_Users_mac_Desktop_vue_vue_14.jpg]

*  此时我们的打包就完成了，在dist目录下就产生了bundle.js文件，这就是打包好的文件，可以直接使用。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0fL8wPs2-1610003934956)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/15.jpg)\]][img-0fL8wPs2-1610003934956_Users_mac_Desktop_vue_vue_15.jpg]

*  我们只需要在index.html中将刚才打包好的文件引入就可以执行我们的项目了。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbuS8Uy1-1610003934962)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/16.jpg)\]][img-vbuS8Uy1-1610003934962_Users_mac_Desktop_vue_vue_16.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZDx4FLi-1610003934964)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/17.jpg)\]][img-iZDx4FLi-1610003934964_Users_mac_Desktop_vue_vue_17.jpg]

## loader的使用（核心） ##

### 什么是loader？ ###

*  loader是webpack中一个非常核心的概念。
 *  webpack用来做什么呢？
    
     *  在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
     *  但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
     *  对于webpack本身的能来来说，这些转化是不支持的。
     *  那怎么办呢？给webpack扩展对应的loader就可以了！
 *  loader使用过程：
    
     *  **步骤一**：通过npm安装需要使用的loader。
     *  **步骤二**：在webpack.config.js中的module关键字下进行配置。
 *  大部分loader我们都可以在webpack的官网中找到，并学习对应的用法。

### css文件处理 ###

*  项目开发中，我们必然要添加很多的样式，而样式我们往往写到一个单独的文件中。
    
     *  在src目录中，创建一个css文件，其中创建一个normal.css文件。
     *  我们也可以重新组织文件的目录结构，将零散的js文件放在一个js文件夹中。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ASwrh5J5-1610003934966)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/18.jpg)\]][img-ASwrh5J5-1610003934966_Users_mac_Desktop_vue_vue_18.jpg]

*  normal.css中的代码非常简单，就是将body这是为red：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sNkTChBp-1610003934967)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/19.jpg)\]][img-sNkTChBp-1610003934967_Users_mac_Desktop_vue_vue_19.jpg]

*  但是，这个时候normal.css中的样式会生效么？
    
     *  当然不会，因为我们压根没有引用它。
     *  webpack也不可能找到它，因为我们只有一个入口，webpack会从入口开始查找其他依赖的文件。
 *  在入口文件中**引用**：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ONOKScF-1610003934970)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/20.jpg)\]][img-4ONOKScF-1610003934970_Users_mac_Desktop_vue_vue_20.jpg]

*  此时我们如果通过npm run build进行打包还会**报错**，因为对于webpack本身的能来来说，css转化是不支持的。
 *  我们需要安装loader来完成我们需要的功能，这些loader我们可以在[官网][Link 1]上查看到。
 *  进入翻译后官网选择**中文文档**，也就是API。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E4QcbquI-1610003934974)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/21.jpg)\]][img-E4QcbquI-1610003934974_Users_mac_Desktop_vue_vue_21.jpg]

*  选择右上角的**LOADER**。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InP372rq-1610003934978)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/22.jpg)\]][img-InP372rq-1610003934978_Users_mac_Desktop_vue_vue_22.jpg]

*  选择我们我们需要的：**样式**相关的loader。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rmjNm6FY-1610003934980)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/23.jpg)\]][img-rmjNm6FY-1610003934980_Users_mac_Desktop_vue_vue_23.jpg]

*  查看功能，发现我们需要前两个loader。点击进入并将这两个loader安装。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5gUBX8sO-1610003934984)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/24.jpg)\]][img-5gUBX8sO-1610003934984_Users_mac_Desktop_vue_vue_24.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tWU61Gfj-1610003934989)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/25.jpg)\]][img-tWU61Gfj-1610003934989_Users_mac_Desktop_vue_vue_25.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i4jMeDNA-1610003934992)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/26.jpg)\]][img-i4jMeDNA-1610003934992_Users_mac_Desktop_vue_vue_26.jpg]

*  注意在webpack.config.js中的**配置顺序**：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b8WwPaY6-1610003934994)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/27.jpg)\]][img-b8WwPaY6-1610003934994_Users_mac_Desktop_vue_vue_27.jpg]

*  此时就可以通过npm run build来打包我们的项目了。打包完成后就可以运行。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UNTEZYOZ-1610003934997)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/28.jpg)\]][img-UNTEZYOZ-1610003934997_Users_mac_Desktop_vue_vue_28.jpg]

### less文件处理 ###

*  如果我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？
    
     *  我们这里以less为例，其他也是一样的。
 *  首先在css文件夹下创建special.less文件，内容如下：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ll8gZ4ko-1610003934999)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/29.jpg)\]][img-ll8gZ4ko-1610003934999_Users_mac_Desktop_vue_vue_29.jpg]
 *  在main.js中引入依赖：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uj5KM67G-1610003935000)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/30.jpg)\]][img-Uj5KM67G-1610003935000_Users_mac_Desktop_vue_vue_30.jpg]
 *  去官网找到所需的loader：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RdSotypB-1610003935002)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/31.jpg)\]][img-RdSotypB-1610003935002_Users_mac_Desktop_vue_vue_31.jpg]
 *  通过npm安装所需的loader：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LxklR5nE-1610003935005)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/32.jpg)\]][img-LxklR5nE-1610003935005_Users_mac_Desktop_vue_vue_32.jpg]  
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z8pZxGVH-1610003935009)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/33.jpg)\]][img-Z8pZxGVH-1610003935009_Users_mac_Desktop_vue_vue_33.jpg]
 *  更改webpack.config.js文件中的配置：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcGglx2Y-1610003935010)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/34.jpg)\]][img-jcGglx2Y-1610003935010_Users_mac_Desktop_vue_vue_34.jpg]
    
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PtvDgjt7-1610003935013)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/35.jpg)\]][img-PtvDgjt7-1610003935013_Users_mac_Desktop_vue_vue_35.jpg]
 *  打包：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IXfEBsRY-1610003935015)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/36.jpg)\]][img-IXfEBsRY-1610003935015_Users_mac_Desktop_vue_vue_36.jpg]

*  查看效果：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L9ida7kQ-1610003935016)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/37.jpg)\]][img-L9ida7kQ-1610003935016_Users_mac_Desktop_vue_vue_37.jpg]
    
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zjkUyZ5x-1610003935017)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/38.jpg)\]][img-zjkUyZ5x-1610003935017_Users_mac_Desktop_vue_vue_38.jpg]

### 图片文件的处理 ###

*  首先先找来两张图片，其中xinxin大概25kb，aniu大概18kb：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sRPw79mH-1610003935023)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/39.jpg)\]][img-sRPw79mH-1610003935023_Users_mac_Desktop_vue_vue_39.jpg]

*  在ccs文件夹下的normal.css中将背景设置为刚才的一张照片。![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UXlLbG1y-1610003935025)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/40.jpg)\]][img-UXlLbG1y-1610003935025_Users_mac_Desktop_vue_vue_40.jpg]
 *  在官网中找到url-loader并通过npm将其下载下来。![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-15tvcobE-1610003935026)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/41.jpg)\]][img-15tvcobE-1610003935026_Users_mac_Desktop_vue_vue_41.jpg]
 *  更改webpack.config.js文件的配置：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YMzwgaSM-1610003935027)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/42.jpg)\]][img-YMzwgaSM-1610003935027_Users_mac_Desktop_vue_vue_42.jpg]
 *  运行程序发现报错：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJPLJ8As-1610003935029)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/43.jpg)\]][img-FJPLJ8As-1610003935029_Users_mac_Desktop_vue_vue_43.jpg]
 *  这是因为我们设置的**限定大小**小于图片大小。

test: /\.(png|jpg|gif)$/i,
    use: [
    	{
    		loader: 'url-loader',
    		options: {
    		// 当加载的图片，小于limit时，会将图片编译成base64字符串类型
    		// 当加载的图片，大于limit时，需要使用file-loader模块进行加载
    		limit: 19000,
    	},
    },

*  将limit调整到26000，发现可以正常执行。![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4XwyRDzv-1610003935030)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/44.jpg)\]][img-4XwyRDzv-1610003935030_Users_mac_Desktop_vue_vue_44.jpg]
 *  不调整limit，通过安装file-loader解决：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mPC1Yile-1610003935031)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/45.jpg)\]][img-mPC1Yile-1610003935031_Users_mac_Desktop_vue_vue_45.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TvPlYGy9-1610003935032)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/46.jpg)\]][img-TvPlYGy9-1610003935032_Users_mac_Desktop_vue_vue_46.jpg]

*  我们发现它把图片转化完放到了dist文件夹下，并为了**避免重名**以随机的32位hash值为名。![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQuGbrQu-1610003935033)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/47.jpg)\]][img-pQuGbrQu-1610003935033_Users_mac_Desktop_vue_vue_47.jpg]
    
     *  我们发现webpack自动帮助我们生成一个非常长的名字。
     *  这是一个32位hash值，目的是防止名字重复。
     *  但是，真是开发中，我们可能对打包的图片名字有一定的要求。
     *  比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复。
     *  所以我们可以在options中添加上**如下选项**：
     *  **img**：文件要打包到的文件夹。
     *  **name**：获取图片原来的名字，放在该位置。
     *  **hash**：8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位数。
     *  **ext**：使用图片原来的扩展名。
     *  具体操作如下图：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rVtjCqvq-1610003935034)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/48.jpg)\]][img-rVtjCqvq-1610003935034_Users_mac_Desktop_vue_vue_48.jpg]

*  **总之**：将小于limit大小的图片编译成base64格式，将大于limit大小的图片通过flie-loader转化后放到dist文件夹下。
 *  以上就是**图片资源**的加载。

### ES6语法处理 ###

*  如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转化成ES5语法，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。
 *  在之前，将ES6的语法转成ES5，需要使用babel。
    
     *  而webpack中，我们直接使用babel对应的loader就可以了。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLcpT1m8-1610003935036)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/49.jpg)\]][img-nLcpT1m8-1610003935036_Users_mac_Desktop_vue_vue_49.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eO84yUOC-1610003935037)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/50.jpg)\]][img-eO84yUOC-1610003935037_Users_mac_Desktop_vue_vue_50.jpg]

## webpack中配置Vue ##

*  后续项目中，我们会使用Vuejs进行开发，而且会以特殊的文件来组织vue的组件。
    
     *  所以，下面我们来学习一下如何在我们的webpack环境中继承Vuejs
 *  现在，我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要进行安装。
    
     *  **注**：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖。
     *      npm install vue --save
     *  那么接下来就可以按照我们之前学习的方式来使用Vue了。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E3uzAlJp-1610003935038)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/51.jpg)\]][img-E3uzAlJp-1610003935038_Users_mac_Desktop_vue_vue_51.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b2UwiVDW-1610003935039)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/52.jpg)\]][img-b2UwiVDW-1610003935039_Users_mac_Desktop_vue_vue_52.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zk76CXNg-1610003935040)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/53.jpg)\]][img-zk76CXNg-1610003935040_Users_mac_Desktop_vue_vue_53.jpg]

*  我们做完以上操作就可以npm run build来运行我们的项目了：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9VLCLt4F-1610003935042)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/54.jpg)\]][img-9VLCLt4F-1610003935042_Users_mac_Desktop_vue_vue_54.jpg]

### el和template区别 ###

*  正常运行之后，我们来考虑一个问题：
    
     *  如果我们希望将data中的数据显示在界面中，就必须是修改index.html
     *  如果我们之后自定义了组件，也必须修改index.html来使用组件
     *  但是html模板在之后的开发中，我们并不希望手动的来频繁修改，是否可以做到呢？
 *  定义template属性：
    
     *  在前面的Vue实例中，我们定义了el属性，用于和index.html中的\#app进行绑定，让Vue实例之后可以管理它其中的内容。template会替换el！！！
     *  这里，我们可以将div元素中的\{ \{message\}\}内容删除，只保留一个基本的id的div元素。
     *  但是如果我依然希望在其中显示\{ \{message\}\}的内容，应该怎么处理呢？
     *  我们可以再定义一个template属性：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KMqrsStP-1610003935043)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/55.jpg)\]][img-KMqrsStP-1610003935043_Users_mac_Desktop_vue_vue_55.jpg]  
        ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-up4gzk4r-1610003935044)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/56.gif)\]][img-up4gzk4r-1610003935044_Users_mac_Desktop_vue_vue_56.gif]
 *  现在，我们以一种全新的方式来组织一个**vue的组件**，就像下面的图示那样，但是这个时候能被正确的加载么？
    
     *  必然不可以，以这种特殊的文件以及特殊的格式，必须有人帮助我们处理。
     *  谁来处理呢？vue-loader以及vue-template-compiler。
     *      npm install --save-dev vue-loader vue-template-compiler
 *  将上面的代码进行抽离到一个.vue的文件：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YiouskxE-1610003935045)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/57.jpg)\]][img-YiouskxE-1610003935045_Users_mac_Desktop_vue_vue_57.jpg]
    
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BOM4VMWR-1610003935045)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/58.jpg)\]][img-BOM4VMWR-1610003935045_Users_mac_Desktop_vue_vue_58.jpg]
 *  但是Vue Loader v15 现在需要配合一个 webpack **插件**(下面讲解plugin插件)才能正确使用：

// webpack.config.js
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    module.exports = {
      // ...
      plugins: [
        new VueLoaderPlugin()
      ]
    }

## plugin（插件）的使用 ##

*  plugin**是什么**？
    
     *  plugin是**插件**的意思，通常是用于对某个现有的框架进行扩展。
     *  webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
 *  loader和plugin的**区别**
    
     *  loader主要用于转换某些类型的模块，它是一个转换器。
     *  plugin是插件，它是对webpack本身的扩展，是一个扩展提
 *  plugin的**使用过程**：
    
     *  **步骤一**：通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）
     *  **步骤二**：在webpack.config.js中的plugins中配置插件。
 *  下面，我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让我们的webpack变得更加好用。

### 添加版权的plugin ###

*  我们先来使用一个最简单的插件，为打包的文件**添加版权声明**
    
     *  该插件名字叫BannerPlugin，属于webpack自带的插件。
 *  按照下面的方式来修改webpack.config.js的文件：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XXJACdUL-1610003935046)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/59.jpg)\]][img-XXJACdUL-1610003935046_Users_mac_Desktop_vue_vue_59.jpg]

*  重新打包程序：查看bundle.js文件的头部，看到如下信息：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MGHdMjn1-1610003935047)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/60.jpg)\]][img-MGHdMjn1-1610003935047_Users_mac_Desktop_vue_vue_60.jpg]

### 打包html的plugin ###

*  目前，我们的index.html文件时存放在项目的根目录下的。
    
     *  我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
     *  所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HTMLWebpackPlugin插件
 *  HtmlWebpackPlugin插件可以为我们做这些事情：
    
     *  自动生成一个index.html文件（可以指定模板来生成）
     *  将打包的js文件，自动通过script标签插入到body中
 *  安装HtmlWebpackPlugin插件：
    
     *      npm install html-webpack-plugin --save-dev
 *  使用插件，修改webpack.config.js文件中的plugins部分的内容：
    
     *  这里的template表示根据什么模板来生成index.html

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NJOAqv9F-1610003935048)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/61.jpg)\]][img-NJOAqv9F-1610003935048_Users_mac_Desktop_vue_vue_61.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HMWYHgI4-1610003935048)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/62.jpg)\]][img-HMWYHgI4-1610003935048_Users_mac_Desktop_vue_vue_62.jpg]

## 搭建本地服务器 ##

*  webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器**自动刷新**显示我们修改后的结果。
 *  不过它是一个单独的模块，在webpack中使用之前需要先安装它
    
     *      npm install --save-dev webpack-dev-server
 *  devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：
    
     *  contentBase：为哪一个文件夹提供服务，默认是根文件夹。
     *  port：端口号。
     *  inline：页面实时刷新。
     *  historyApiFullback：在SPA页面中，依赖HTML5的history模式。
 *  webpack.config.js文件配置如下：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3j7X6t5s-1610003935049)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/63.jpg)\]][img-3j7X6t5s-1610003935049_Users_mac_Desktop_vue_vue_63.jpg]

*  我们可以在配置另外一个sripts：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iHg9wQrx-1610003935050)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记十/64.jpg)\]][img-iHg9wQrx-1610003935050_Users_mac_Desktop_vue_vue_64.jpg]

*  此时我们运行：
    
        npm run dev
    
    就可以自动刷新了。

[img-jdB0dqJB-1610003934925_Users_mac_Desktop_vue_vue_1.png]: /images/20221119/eb849832ffee48edbd4432d2024f971e.png
[Node.js]: https://blog.csdn.net/weixin_46351593/article/details/108214080
[img-92GrqgjP-1610003934929_Users_mac_Desktop_vue_vue_2.jpg]: /images/20221119/d15802e7e9834fcab8c2a410fa1dd23b.png
[img-Q4Ccv7Ap-1610003934930_Users_mac_Desktop_vue_vue_3.jpg]: /images/20221119/158ecce690f44a229a6db35d1fa9d59d.png
[img-5hNJwOwn-1610003934933_Users_mac_Desktop_vue_vue_4.jpg]: /images/20221119/b4a5d563da404c1f98af8b63ee627ded.png
[img-AjxUBbiI-1610003934938_Users_mac_Desktop_vue_vue_5.jpg]: /images/20221119/67fa8f6877c9454495467b1086641ec0.png
[img-8BkJDvI0-1610003934940_Users_mac_Desktop_vue_vue_6.jpg]: /images/20221119/aaf68e1df39449e08f84de6fd970c889.png
[img-gWvehLvR-1610003934940_Users_mac_Desktop_vue_vue_7.jpg]: /images/20221119/88119fe94fd243b4ad14cdde20c1a3f2.png
[img-JtUA68CH-1610003934942_Users_mac_Desktop_vue_vue_8.jpg]: /images/20221119/f9246525a3144c38b012f00c91efd9fe.png
[img-uKFiJXkk-1610003934945_Users_mac_Desktop_vue_vue_9.jpg]: /images/20221119/e9ea725d45e04303a7c6f9e0e421e485.png
[img-KdM8MhZC-1610003934949_Users_mac_Desktop_vue_vue_10.jpg]: /images/20221119/9d71b9d0a959450fa287004dc84d86dc.png
[img-7E0aW02e-1610003934950_Users_mac_Desktop_vue_vue_11.jpg]: /images/20221119/c665255380284dee99f7991f0239b8d7.png
[img-vdcFULrc-1610003934951_Users_mac_Desktop_vue_vue_12.jpg]: /images/20221119/c57d81efb08d4c80ac3c222a60859d2d.png
[img-DC0SaG1e-1610003934952_Users_mac_Desktop_vue_vue_13.jpg]: /images/20221119/64d0e27d9437409eb41f2045f2e6eeaa.png
[img-TKJTbUMi-1610003934954_Users_mac_Desktop_vue_vue_14.jpg]: /images/20221119/9c497dfbf5ff45df807688f4c28ae942.png
[img-0fL8wPs2-1610003934956_Users_mac_Desktop_vue_vue_15.jpg]: /images/20221119/63eba8e138ce45c9ad6598a1794bdf93.png
[img-vbuS8Uy1-1610003934962_Users_mac_Desktop_vue_vue_16.jpg]: /images/20221119/01e8861b67d84379a239ba0e710d693c.png
[img-iZDx4FLi-1610003934964_Users_mac_Desktop_vue_vue_17.jpg]: /images/20221119/4ade478ea1f04ff086645a3488981b72.png
[img-ASwrh5J5-1610003934966_Users_mac_Desktop_vue_vue_18.jpg]: /images/20221119/04824afe8cc944d5947e7b4939eb33ba.png
[img-sNkTChBp-1610003934967_Users_mac_Desktop_vue_vue_19.jpg]: /images/20221119/d2fb64061ee34b36ad4a0864edb00224.png
[img-4ONOKScF-1610003934970_Users_mac_Desktop_vue_vue_20.jpg]: /images/20221119/0e7626e1469748bca80191747ee9a693.png
[Link 1]: https://webpack.docschina.org/
[img-E4QcbquI-1610003934974_Users_mac_Desktop_vue_vue_21.jpg]: /images/20221119/0a46119a76fa4e63bac867c1aadee1c9.png
[img-InP372rq-1610003934978_Users_mac_Desktop_vue_vue_22.jpg]: /images/20221119/98e05ab87cd441fcadd307bec01115d6.png
[img-rmjNm6FY-1610003934980_Users_mac_Desktop_vue_vue_23.jpg]: /images/20221119/75cafc9eb1184d5abcd7f845ca2e5055.png
[img-5gUBX8sO-1610003934984_Users_mac_Desktop_vue_vue_24.jpg]: /images/20221119/f3468d615dfe40e287ab28709e275efb.png
[img-tWU61Gfj-1610003934989_Users_mac_Desktop_vue_vue_25.jpg]: /images/20221119/debcfafb76bc40f0a5f89f3aa700e4c4.png
[img-i4jMeDNA-1610003934992_Users_mac_Desktop_vue_vue_26.jpg]: /images/20221119/7b02b762d2944f58a938fa8fe1dcf2bf.png
[img-b8WwPaY6-1610003934994_Users_mac_Desktop_vue_vue_27.jpg]: /images/20221119/01848a8b18724b6b8cc1c22bbef41ada.png
[img-UNTEZYOZ-1610003934997_Users_mac_Desktop_vue_vue_28.jpg]: /images/20221119/f488558bfc9d4277a5c3d9602058da3a.png
[img-ll8gZ4ko-1610003934999_Users_mac_Desktop_vue_vue_29.jpg]: /images/20221119/951bf47780a344d0a75c148f066ea639.png
[img-Uj5KM67G-1610003935000_Users_mac_Desktop_vue_vue_30.jpg]: /images/20221119/3578ae9f5f7048b4bfbfe4c11ae871e0.png
[img-RdSotypB-1610003935002_Users_mac_Desktop_vue_vue_31.jpg]: /images/20221119/eefe2e67fdbd4e119a92bc44facacc28.png
[img-LxklR5nE-1610003935005_Users_mac_Desktop_vue_vue_32.jpg]: /images/20221119/023bd59f04ef4bc482fb15f3a3c5bb27.png
[img-Z8pZxGVH-1610003935009_Users_mac_Desktop_vue_vue_33.jpg]: /images/20221119/84b760c72eeb4ac58555068f5a84beec.png
[img-jcGglx2Y-1610003935010_Users_mac_Desktop_vue_vue_34.jpg]: /images/20221119/a40cf7ed4b8442f7b39bbe8d818136c1.png
[img-PtvDgjt7-1610003935013_Users_mac_Desktop_vue_vue_35.jpg]: /images/20221119/4fcde942d20941d68327a12ed75eb515.png
[img-IXfEBsRY-1610003935015_Users_mac_Desktop_vue_vue_36.jpg]: /images/20221119/62813738bd8741889755f1a2150925bf.png
[img-L9ida7kQ-1610003935016_Users_mac_Desktop_vue_vue_37.jpg]: /images/20221119/d4d6ad6b567448a4a18ce6a511740837.png
[img-zjkUyZ5x-1610003935017_Users_mac_Desktop_vue_vue_38.jpg]: /images/20221119/ee69cc12eaf24c6f95973f72c1e912df.png
[img-sRPw79mH-1610003935023_Users_mac_Desktop_vue_vue_39.jpg]: /images/20221119/a523bf9767244c24bd44b422ecece362.png
[img-UXlLbG1y-1610003935025_Users_mac_Desktop_vue_vue_40.jpg]: /images/20221119/43ff3f9a971943c0a9c210cdbd093871.png
[img-15tvcobE-1610003935026_Users_mac_Desktop_vue_vue_41.jpg]: /images/20221119/07478d901bbe4592ae1fa1707843c792.png
[img-YMzwgaSM-1610003935027_Users_mac_Desktop_vue_vue_42.jpg]: /images/20221119/8d26bbc10b3c492db89710a04a08c867.png
[img-FJPLJ8As-1610003935029_Users_mac_Desktop_vue_vue_43.jpg]: /images/20221119/e5332b3c587a463ebc1a1f16fa39fc68.png
[img-4XwyRDzv-1610003935030_Users_mac_Desktop_vue_vue_44.jpg]: /images/20221119/e3f3c71181514b7f8d132ab931abca1e.png
[img-mPC1Yile-1610003935031_Users_mac_Desktop_vue_vue_45.jpg]: /images/20221119/337a2e786c1e4bf7a4c14c33be30fa95.png
[img-TvPlYGy9-1610003935032_Users_mac_Desktop_vue_vue_46.jpg]: /images/20221119/2e17ab5cb31e4d9d8a0010f324b2a7cd.png
[img-pQuGbrQu-1610003935033_Users_mac_Desktop_vue_vue_47.jpg]: /images/20221119/652b907ca7034ab6ae641aad913c7fe4.png
[img-rVtjCqvq-1610003935034_Users_mac_Desktop_vue_vue_48.jpg]: /images/20221119/3a6fd099de4d4e89acd04f2f5b6ee0b0.png
[img-nLcpT1m8-1610003935036_Users_mac_Desktop_vue_vue_49.jpg]: /images/20221119/2c0fd7fcaf5a477e80b3aebfa3060411.png
[img-eO84yUOC-1610003935037_Users_mac_Desktop_vue_vue_50.jpg]: /images/20221119/e6390bae9b0c49008b78f92c9123d8c6.png
[img-E3uzAlJp-1610003935038_Users_mac_Desktop_vue_vue_51.jpg]: /images/20221119/8954a046dec24f8e931b383ef8e2a7c6.png
[img-b2UwiVDW-1610003935039_Users_mac_Desktop_vue_vue_52.jpg]: /images/20221119/3a0e512f22eb4f1e96bad60c0aa5addd.png
[img-zk76CXNg-1610003935040_Users_mac_Desktop_vue_vue_53.jpg]: /images/20221119/bef60a5686534bab8974ea0a7463f94b.png
[img-9VLCLt4F-1610003935042_Users_mac_Desktop_vue_vue_54.jpg]: /images/20221119/c3d2c170b98e4cc3b2fbca6e9c06cd67.png
[img-KMqrsStP-1610003935043_Users_mac_Desktop_vue_vue_55.jpg]: /images/20221119/ca442831012c4c30a85d1ce2a6d2ebc3.png
[img-up4gzk4r-1610003935044_Users_mac_Desktop_vue_vue_56.gif]: /images/20221119/8885ea2a8c314664b9dbc020e311a7c4.png
[img-YiouskxE-1610003935045_Users_mac_Desktop_vue_vue_57.jpg]: /images/20221119/e84093fe166a4849a56d95b569b72ad5.png
[img-BOM4VMWR-1610003935045_Users_mac_Desktop_vue_vue_58.jpg]: /images/20221119/b41846c119284010b649878b620882cb.png
[img-XXJACdUL-1610003935046_Users_mac_Desktop_vue_vue_59.jpg]: /images/20221119/df50be7f8a2448dabedf4459f822f78e.png
[img-MGHdMjn1-1610003935047_Users_mac_Desktop_vue_vue_60.jpg]: /images/20221119/f7d816c120ce4e7a8d39e4ad9b9d8d7a.png
[img-NJOAqv9F-1610003935048_Users_mac_Desktop_vue_vue_61.jpg]: /images/20221119/63156021d84741ab82b10334b0112f1d.png
[img-HMWYHgI4-1610003935048_Users_mac_Desktop_vue_vue_62.jpg]: /images/20221119/fa923ff24721436c88698bd33d9afba2.png
[img-3j7X6t5s-1610003935049_Users_mac_Desktop_vue_vue_63.jpg]: /images/20221119/aecf3dfe0e3b4acb98ef1106da87afdd.png
[img-iHg9wQrx-1610003935050_Users_mac_Desktop_vue_vue_64.jpg]: /images/20221119/f3cb0ac696ed4c4db535474c0dd09b34.png