Vue笔记十——webpack敲重点！！！（详解）

Webpack详解

认识webpack

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

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

webpack的安装

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

• 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

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

webpack的起步与配置

准备工作

• 我们创建如下文件和文件夹：

• 文件和文件夹解析：

  • dist文件夹：用于存放之后打包的文件。

  • src文件夹：用于存放我们写的源文件。

    • main.js：项目的入口文件。具体内容如下：

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

  • index.html：浏览器打开展示的首页html。

  • package.json：通过npm init生成的，npm包管理文件。

局部安装webpack

• 目前，我们使用的webpack是全局的，如果我们想使用局部webpack来打包呢？

  • 因为一个项目往往依赖特定的webpack版本，全局的的版本可能和这个项目的webpack版本不一致，导至打包出现问题。
  • 所以通常一个项目，都有自己局部的webpack。

• 第一步，项目中需要安装自己局部的webpack

  • 这里我们让局部安装webpack5.11.1：

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

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

建立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'
  },
}

package.json中定义启动

• 我们可以通过node_modules/.bin/webpack运行打包：

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

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

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

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

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文件夹中。

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

• 但是，这个时候normal.css中的样式会生效么？

  • 当然不会，因为我们压根没有引用它。
  • webpack也不可能找到它，因为我们只有一个入口，webpack会从入口开始查找其他依赖的文件。

• 在入口文件中引用：

• 此时我们如果通过npm run build进行打包还会报错，因为对于webpack本身的能来来说，css转化是不支持的。

• 我们需要安装loader来完成我们需要的功能，这些loader我们可以在官网上查看到。

• 进入翻译后官网选择中文文档，也就是API。

• 选择右上角的LOADER。

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

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

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

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

less文件处理

• 如果我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？

  • 我们这里以less为例，其他也是一样的。

• 首先在css文件夹下创建special.less文件，内容如下：

• 在main.js中引入依赖：

• 去官网找到所需的loader：

• 通过npm安装所需的loader：
  

• 更改webpack.config.js文件中的配置：

  

• 打包：

• 查看效果：

  

图片文件的处理

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

• 在ccs文件夹下的normal.css中将背景设置为刚才的一张照片。

• 在官网中找到url-loader并通过npm将其下载下来。

• 更改webpack.config.js文件的配置：

• 运行程序发现报错：

• 这是因为我们设置的限定大小小于图片大小。

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

• 将limit调整到26000，发现可以正常执行。

• 不调整limit，通过安装file-loader解决：

• 我们发现它把图片转化完放到了dist文件夹下，并为了避免重名以随机的32位hash值为名。

  • 我们发现webpack自动帮助我们生成一个非常长的名字。
  • 这是一个32位hash值，目的是防止名字重复。
  • 但是，真是开发中，我们可能对打包的图片名字有一定的要求。
  • 比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复。
  • 所以我们可以在options中添加上如下选项：
  • img：文件要打包到的文件夹。
  • name：获取图片原来的名字，放在该位置。
  • hash：8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位数。
  • ext：使用图片原来的扩展名。
  • 具体操作如下图：

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

ES6语法处理

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

webpack中配置Vue

• 后续项目中，我们会使用Vuejs进行开发，而且会以特殊的文件来组织vue的组件。

  • 所以，下面我们来学习一下如何在我们的webpack环境中继承Vuejs

• 现在，我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要进行安装。

  • 注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖。

  • npm install vue --save
    

  • 那么接下来就可以按照我们之前学习的方式来使用Vue了。

• 我们做完以上操作就可以npm run build来运行我们的项目了：

el和template区别

• 正常运行之后，我们来考虑一个问题：

  • 如果我们希望将data中的数据显示在界面中，就必须是修改index.html
  • 如果我们之后自定义了组件，也必须修改index.html来使用组件
  • 但是html模板在之后的开发中，我们并不希望手动的来频繁修改，是否可以做到呢？

• 定义template属性：

  • 在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容。template会替换el！！！
  • 这里，我们可以将div元素中的{ {message}}内容删除，只保留一个基本的id的div元素。
  • 但是如果我依然希望在其中显示{ {message}}的内容，应该怎么处理呢？
  • 我们可以再定义一个template属性：
    

• 现在，我们以一种全新的方式来组织一个vue的组件，就像下面的图示那样，但是这个时候能被正确的加载么？

  • 必然不可以，以这种特殊的文件以及特殊的格式，必须有人帮助我们处理。

  • 谁来处理呢？vue-loader以及vue-template-compiler。

  • npm install --save-dev vue-loader vue-template-compiler
    

• 将上面的代码进行抽离到一个.vue的文件：

  

• 但是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的文件：

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

打包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

搭建本地服务器

• webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

• 不过它是一个单独的模块，在webpack中使用之前需要先安装它

  • npm install --save-dev webpack-dev-server
    

• devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

  • contentBase：为哪一个文件夹提供服务，默认是根文件夹。
  • port：端口号。
  • inline：页面实时刷新。
  • historyApiFullback：在SPA页面中，依赖HTML5的history模式。

• webpack.config.js文件配置如下：

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

• 此时我们运行：

  npm run dev
  

  就可以自动刷新了。

回顾

Vue笔记一——Vue安装与体验
Vue笔记二——Vue声明周期与模板语法
Vue笔记三——计算属性(computed)
Vue笔记四——事件监听的使用
Vue笔记五——条件判断与循环遍历
Vue笔记六——书籍购物车案例
Vue笔记七——v-model表单输入绑定详细介绍
Vue笔记八——关于组件不可不知的知识！
Vue笔记九——slot插槽的使用