一.认识webpack

官网解释：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

从模块化和打包两个角度来理解：

模块化：

webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用

打包:

合并成一个或多个包(Bundle),并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

静态：

这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；

webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能

webpack如何打包？

在webpack开始打包时，会根据命令或者配置文件找到入口文件
从入口开始，根据文件中之间的依赖关系生成依赖关系图，这个依赖关系图会包括项目中所需要的所有模块，包括 js文件，css文件,图片，字体等
依次遍历图结构，根据文件类型使用对应的loader进行解析，依次进行打包

二.webpack的安装

安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm
全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本)

npm i webpack@3.6.0 -g

局部安装webpack（后续才需要）

--save-dev`是开发时依赖，项目打包后不需要继续使用的。

cd 对应目录
npm i webpack@3.6.0 --save-dev

为什么全局安装后，还需要局部安装呢？

在终端直接执行webpack命令，使用的全局安装的webpack
当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

要同时安装webpack,webpack-cli(此工具用于在命令行中运行 webpack)

npm install webpack webpack-cli –g # 全局安装

npm install webpack webpack-cli –D # 局部安装

那么它们是什么关系呢？

在命令行执行webpack命令，会执行node_modules下的.bin目录下的webpack；
webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）

三.webpack的起步

1.准备工作：

dist文件夹：用于存放之后打包的文件
src文件夹：用于存放我们写的源文件

main.js：项目的入口文件。具体内容查看下面详情。

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

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

2.js文件的打包

现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗？不可以。

因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。
另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。

我们应该怎么做呢？使用webpack工具，对多个js文件进行打包。

webpack是模块化的打包工具，所以它支持代码中写模块化，可以对模块化的代码进行处理。
如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就非常方便了。

如何打包？

1.webpack

直接执行webpack默认会将当前目录下的 src/index.js 作为入口文件，所以，如果当前项目中没有存在src/index.js文件，那么会报错,打包后的文件会保存在dist/main.js中

2.webpack --entry ./src/main.js --output-path ./dist指定入口文件和出口文件

将src/main.js文件打包，并把打包好的文件保存到dist/main.js中

3.使用打包后的文件

打包后会在dist文件下，生成一个main.js文件
main.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可

四.webpack的配置

1.webpack.config.js中配置入口文件和出口文件

注意：

output中的path必须是绝对路径
使用node提供的核心模块path中的resolve方法对路径进行拼接
__dirname是node提供的一个内置变量，用来获取当前文件所在的绝对路径

在命令行中执行 webpack命令时，会去webpack.config.js文件中找对应的入口文件和出口文件进行打包，但是在命令行中执行webpack使用的是全局安装的webpack，但是一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题

2.局部安装webpack

2.1 npm init 初始化package.json包管理工具

2.2 下载局部webpack

--save-dev 开发时依赖，开发时需要的包，生产环境不要的包，对应的包信息保存在package.json文件中的devDependencies

3.package.json中定义启动

在package.json的scripts中定义自己的执行脚本。

"build":"webpack" ------当执行npm run build 的时候，执行webpack

package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。
首先，会寻找本地的node_modules/.bin路径中对应的命令。
如果没有找到，会去全局的环境变量中寻找。

4. npx webpack

在命令行中使用npx webpack 也是使用的局部webpack

五.loader 的使用

1.css 文件处理

项目开发过程中，我们需要添加很多的样式，而样式我们往往写到一个单独的文件中。
在src目录中，创建一个css文件，其中创建一个normal.css文件，将零散的css文件放在一个css文件夹中。
但是，这个时候normal.css中的样式会生效吗？
当然不会，因为我们压根就没有引用它。
webpack也不可能找到它，因为我们只有一个入口，webpack会从入口开始查找其他依赖的文件。

在入口文件中引用：

通过上述引用，运行npm run build,会报错，需要loader对css文件进行处理

2.为什么要使用loader?

主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。对于webpack本身的能力来说，对于这些转化是不支持的。那怎么办呢？给webpack扩展对应的loader就可以啦。

3.loader 使用过程

步骤一：通过npm安装需要使用的loader

npm install css-loader --save-dev
npm install style-loader --save-dev

css-loader 负责加载css文件,对css文件进行解析,并不会将解析之后的css插入到页面中

style-loader style-loader 负责把css样式以<style>标签嵌入到文档中
步骤二：在webpack.config.js中的module关键字下进行配置

rules是一个数组，每一项都是一个配置对象

test:匹配以.css结尾的文件,对资源进行匹配，通常使用正则

ues:使用style-loader,css-loader进行处理

注意：style-loader需要放在css-loader的前面，这是因为webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的（或者说从下到上，或者说从后到前的）。

module.rules中各配置项说明：

test:对资源进行匹配，通常使用正则
use:[{

loader:'css-loader', //必选属性，对应的值是字符串

options:{} //可选属性，值可以是对象或者字符串，值会被传入到loader中

}]，

use:['css-loader'] //use的简写形式，当不需要配置项时
loader:'css-loader' //uses[{loader:'css-loader'}] 的语法糖

4.less文件处理

在main.js中引入.less文件

安装 less-loader

注意：这里还安装了less，因为webpack会使用less将less文件转化成css文件

修改对应的配置文件,添加一个rules选项，用于处理.less文件

5.图片处理

在项目中加入图片，在css样式中引用图片

处理图片文件，可以分别使用url-loader,file-loader，两者工作方式是相似的，但是url-loader可以将较小的文件，转成base64的URI

5.1 使用 file-loader

file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中

安装file-loader：

添加配置项：

再次打包，就会发现dist文件夹下多了一个图片文件：

我们发现webpack自动帮助我们生成一个非常长的名字,这是一个32位hash值，目的是防止名字重复,但是，真实开发中，我们可能对打包的图片名字有一定的要求
比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复
所以，我们可以在options中添加上如下选项：

这个时候我们可以使用 PlaceHolders 来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容： https://webpack.js.org/loaders/file-loader/#placeholders

img：文件要打包到的文件夹
[name]：获取图片原来的名字，放在该位置
[hash:8]：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
[ext]：使用图片原来的扩展名

但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确,默认情况下，webpack会将生成的路径直接返回给使用者

该路径是用在index.html,但是实际生成的图片文件位于dist/img/xx.jpg，所以这里我们需要在路径下再添加一个dist/

5.2 使用 url-loader

url-loader 和 file-loader 的工作方式是相似的，但是可以将较小的文件，转成 base64的URI

安装url-loader:

修改webpack.config.js文件：

limit 属性的作用：

当图片小于8kb时，对图片进行base64编码 ,当图片大于8kb，不会进行base64编码
如果不配置limit，默认会将所有图片都转换成base64格式，小图片转换成base64可以减少http请求次数，但是大图片也转换成base64会增加文件的大小，反而会影响页面的请求速度

6.ES6语法处理--babel

babel:Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的 JavaScript；

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置webpack.config.js文件:

Exclude:排除node_modules中的文件，只转换src中的文件

重新打包，查看bundle.js文件，发现其中的内容变成了ES5的语法

babel的底层原理：

babel是如何做到将我们的 一段代码（ES6、TypeScript、React） 转成 另外一段代码（ES5） 的呢？

从一种源代码（原生语言）转换成另一种源代码（目标语言），这是什么的工作呢？
就是编译器，事实上我们可以将babel看成就是一个编译器。
Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码；

Babel也拥有编译器的工作流程：

解析阶段（Parsing）
转换阶段（Transformation）
生成阶段（Code Generation）

七.plugin的使用

webpack另一个核心是插件，官方对插件的描述：

Loader是用于特定的模块类型进行转换；
Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等,是对webpack现有功能的各种扩展。

7.1 CleanWebpackPlugin

作用：每次打包时，自动删除上一次打包的dist文件夹

下载：npm i clean-webpack-plugin -D

配置：

7.2 HTMLWebpackPlugin

作用：打包生成的dist文件夹中并且有index.html文件，但是在进行项目部署的时候也是需要入口文件的，HTMLWebpackPlugin插件可以帮助我们对index.html文件进行打包，并且在打包的index.html中引用main.js

下载：npm i html-webpack-plugin -D

配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {plugins: [new HtmlWebpackPlugin({title: "webpack title"}),]
}

index.html个文件是如何生成的呢？

默认情况下是根据ejs的一个模板来生成的；
在html-webpack-plugin的源码中，有一个default_index.ejs模块；

如果要自定义index.html文件的内容？

在配置HtmlWebpackPlugin时，我们可以添加如下配置：

template：指定我们要使用的模块所在的路径；根据这个模板生成index.html
title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {plugins: [new HtmlWebpackPlugin({// 可以通过全局变量htmlWebpackPlugin.options.title读取title: "webpack title",template: "./public/index.html"}),]
}

7.3 CopyWebpackPlugin

作用：将资源复制到打包之后的文件夹中

下载：npm i copy-webpack-plugin

配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');export default {plugins:[new CopyWebpackPlugin({patterns: [{from: "public",to: "./",globOptions: {ignore: [// 必须要加上**/ 表示public文件夹下的/index.html"**/index.html"]}}]})]
}

复制的规则在patterns中设置:

from：设置从哪一个源中开始复制；
to：复制到的位置，可以省略，会默认复制到打包的目录下；
globOptions：设置一些额外的选项，其中可以编写需要忽略的文件：

7.4 DefinePlugin

作用：在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

const { DefinePlugin } = require('webpack');
module.export = {plugins: [new DefinePlugin({// 赋值时是取字符串内部的内容，所以需要包裹两层引号BASE_URL: '"./"'}),]
}

八.mode配置

Mode配置选项，可以告知webpack使用响应模式的内置优化：

默认值是production（什么都不设置的情况下）；
可选值有：'none' | 'development' | 'production'；

这几个选项有什么样的区别呢?

八.搭建本地服务器

VUE-webpack超详细教程相关推荐

手把手带你入门前端工程化——超详细教程（高级前端必备）
本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程,让大家动手实践. 另外我还写了一个前端工程化 demo 放在 github 上.这 ...
手把手带你入门前端工程化——超详细教程
授权自@谭光志链接:https://segmentfault.com/a/1190000037752931,也可点击阅读原文本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能 ...
Vue Router的详细教程
Vue Router的详细教程安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 ...
geoserver 发布矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示（二）（小白必备：超详细教程）
上一篇讲了如何利用geoserver 发布矢量切片,接下来我们说如何去展示,既然做我们就作全面吧,谁让我们gis 就是这么苦逼呢,哈哈. 环境: geoserver 2.21 vue 2.0 op ...
geoserver 发布矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示（三）（小白必备：超详细教程）
前两篇分别讲了如何利用geoserver 发布矢量切片和openlayers 加载.接下来我们说如何用leaflet 展示,既然做我们就作全面吧,谁让我们gis 就是这么苦逼呢,哈哈. 环境: g ...
geoserver 发布矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示（一）（小白必备：超详细教程）
环境: geoserver 2.21 vue 2.0 openlayers 6.14 leaflet 1.8 第二篇地址:openlayers 加载矢量切片 geoserver 发布矢量切片(pbf ...
手把手从零开始搭建k8s集群超详细教程
本教程根据B站课程云原生Java架构师的第一课K8s+Docker+KubeSphere+DevOps同步所做笔记教程 k8s集群搭建超详细教程 1. 基本环境搭建 1. 创建私有网络 2. 创建服务 ...
安装64位Oracle 10g超详细教程
安装64位Oracle 10g超详细教程 1. 安装准备阶段 1.1 安装Oracle环境经过上一篇博文的过程,已经完成了对Linux系统的安装,本例使用X-Manager来实现与Linux系统的连 ...
mysql超详细教程_MySQL8.0.23安装超详细教程
前言最近在做一个人脸识别的项目,需要用数据库保存学生信息与前段交互. MySQL的优点 1.mysql性能卓越,服务稳定,很少出现异常宕机. 2.mysql开放源代码且无版权制约,自主性及使用成本低 ...
WebRTC VideoEngine超详细教程（三）——集成X264编码和ffmpeg解码
转自:http://blog.csdn.net/nonmarking/article/details/47958395 本系列目前共三篇文章,后续还会更新 WebRTC VideoEngine超详细教 ...

VUE-webpack超详细教程