学习地址：(https://www.bilibili.com/video/av59594689?p=75)

webpack

`前端模块化打包工具`

认识webpack

什么是webpack？ 官方解释： At its core，webpack is static module bundler for modem JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

我们从两个点来解释上面这句话：`模块`和`打包`

官方的webpack图片表达的意思就是，我们在开发项目的时候可能会有很多的文件，如果我们直接把这些文件发到服务器那边让它部署的话，很可能浏览器那边是不能运行的，为什么呢？因为像sass这种类型浏览器那边是不支持的，我们必须将这个编译成css，又或者是js文件是用我们ES6开发的我们还得给它转成ES5这样的话大部分浏览器才会支持。甚至你通过TypeScript开发的整个程序，我们不能直接给它们放到服务器。而是要经过一些工具，给它做一些打包或者做一些转化，我们最终就会生成一些浏览器可以识别的，浏览器更容易执行的一些代码，让浏览器去执行。

当前市场上的打包工具：`grunt/gulp/webpack/rollup`

前端模块化

在前面的学习中，已经用大量的篇幅解释了为什么前端需要模块化。而且也提到了目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。

而之前我们能用的规范只有ES6，因为只有ES6的规范浏览器才支持，而AMD、CMD、CommonJS不能用这些都需要底层的支撑。但是，我们在webpack里面就能用了。因为webpack就能做一些底层的支撑，而且它会自动将这些代码打包后期自动转化为浏览器能够识别的代码。

在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。

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

打包

打包如何解释？

理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。

就是将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

但是打包的操作是grunt/gulp也可以帮助我们完成，他们有什么不同呢？

现在前端用的最多的就是webpack，gulp现在用的越来越少了

和grunt/gulp的对比

Task：任务

grunt/gulp的核心是Task，它其实就是定义一个任务流。我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化、图片压缩、scss转css）之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。所以，grunt/gulp也被称为前端自动化任务管理工具。

我们来看一个gulp的task，下面的task就是将src下面所有的js文件转成ES5的语法，并且最终输出到dist文件夹中。

const gulp = require ( ' gulp ' );
const babel = require ( ' gulp-babel ' )

gulp.task( ' js ' , () =>
      gulp.src( ' src/*.js ' )
             .pope(babel({
                   presets:[ ' es2015 ' ]
               }))
              .pipe(gulp.dest( ' dist ' ))
);

什么时候用grunt/gulp呢？

如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。只需要进行简单的合并、压缩，就使用grunt/gulp即可。但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。

所以，grunt/gulp和webpack有什么不同呢？

grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。

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

webpack的安装

webpack为了可以正常运行，必须依赖node环境。而node环境为了可以正常的执行很多代码，其中必须包含各种依赖的包，而我们去手动管理这些包就比较麻烦。所以，一般在按照node的时候它会自动帮你安装一个工具，叫npm工具（node packages manager）它就是一个包管理工具，帮助我们管理node上面的各种包的。

安装webpack之前首先需要安装Node.js,Node.js自带了软件包管理工具npm。

查看自己的node版本：(在命令提示符里输入)

node -v

安装了node之后就可以根据里面的npm来安装我们的webpack，全局安装webpack（这里用指定版本号3.6.0，因为Vue CLI2依赖改版本）

npm install webpack@3.6.0 -g

局部安装webpack（后续才需要）--save-dev`是开发时依赖，项目打包后不需要继续使用的。

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

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

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

webpack的起步
```
webpack ./src/main.js ./dist/bundle.js
```
这句话的作用就是告诉webpack 用我们webpack这个工具把 main.js进行一个打包打包到./dist/bundle.js 这里。而如果你main.js里面有依赖其他文件的话webpack它会自动处理我们模块间的依赖，它会根据这个依赖找到对应要打包的文件，直接帮我们都处理好他们之间的关系。

准备工作

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

文件和文件夹解析：

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

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

`main.js：项目的入口文件`

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

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

`package.json：通过npm init生成的，npm包管理的文件（暂时没有用上，后面才会用上）`

mathUtils.js文件中的代码

main.js文件中的代码

js文件的打包

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

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

我们应该怎么做呢？

使用webpack工具，对多个js文件进行打包

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

要怎样打包呢？使用webpack的指令即可。

webpack src/main.js dist/bundle.js

webpack 后面的命令根据你所在目录地址来写，视情况而定。但前面的就是打包文件的地址，后面的是打包后文件存放的地址，这点是不变的。

按下回车，如果我们看见这样一层打印的话就完成打包了。

Hash: 809e59c79366c37ef57e
Version: webpack 3.6.0
Time: 107ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.97 kB       0  [emitted]  main
   [0] ./src(源码-开发的东西都放这里)/main.js 168 bytes {0} [built]
   [1] ./src(源码-开发的东西都放这里)/mathUtils.js 248 bytes {0} [built]

使用打包后的文件

打包后会在dist文件下，生成一个dundle.js文件。文件内容有些复杂，这里我们暂时先不看，后续再进行分析。

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

引入之后去到浏览器上调试就会发现我们通过模块化传入main.js的数据就正常通过浏览器显示出来了。

而文件指向就是我们打包的那个js文件

webpack的起步

webpack的配置

webpack配置这块视频要多看两遍然后展开练习，这里的知识点比较重要

入口和出口

我们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时直接读取呢？

当然可以，就是创建一个webpack.config.js文件

const path = require( 'path' )

module.exports={
//入口：可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可
  entry:'./src/main.js',
//出口：通常是一个对象，里面至少包含两个重要属性，path和filename
  output:{
      path:path.resolve(__dirname, 'dist' ), //注意：path通常是一个绝对路径
      filename:' bundle.js '
  }
}

局部安装webpack

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

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

第一步：项目中需要安装自己局部webpack

这里我们让局部安装webpack3.6.0，Vue CLI3中已经升级到webpack4，但是它将配置文件隐藏了起来，所以查看起来不是很方便。

npm install webpack@3.6.0 --save-dev

第二步：通过node_modules/.bin/webpack启动webpack打包（使用局部webpack）

node_modules/.bin/webpack

手动配置webpack

package.json中定义启动

每次执行都敲这么一长串代码有没有觉得很不方便呢？有没有更好的方法？

我们可以在package.json的scripts中定义组件的执行脚本。

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

我们只需在scripts脚本里配置脚本就行了，如图：

如何执行我们的命令呢？

我们只需在终端中写入一下代码：

npm run build

这样它就会优先在本地这里找webpack的配置了。

webpack的配置

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（不同的loader处理不同的文件）

步骤二：在webpack.config.js中的modules关键字下进行配置

大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。

css文件处理-准备工作

项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。 在src目录中，创建一个css文件，其中创建一个normal.css文件 我们也可以重新组织文件的目录结构，将零散的js文件放在一个js文件夹中。 作为入口的文件不要随便放到文件夹中，我们将它放到最外层就行了，所以我们不要把main.js也放进去,文件夹的命名也是有规范的。 normal.css中的代码非常简单，就是将body设置为red。

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

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

我们要想办法把它也打包到bundle.js里面，到时候我们就只要引用它就可以了。 首先我们在入口文件中引用 css文件处理-打包报错

如果我们仅仅将它进行打包没有给它下载配置对应的loader的话，会出现如下错误。

如果我们不知道引用那个loader或者怎么使用的话我们可以去到官方文档查看，以现在这个案例作为参考我们直接去到[css-loader](https://www.webpackjs.com/loaders/css-loader/)里查看如何使用

首先我们要安装，直接安装上面的文档给的代码赋值到终端中运行，注意必须确定是在我们需要使用的文件夹下运行这行代码，不要安装到别的文件夹里了。

css文件处理-css-loader

在webpack的官方文档中我们可以找到如下关于样式的loader使用方法：

但是当我们重新打包项目发现样式并没有生效，这是为什么？

原因是css-loader只负责加载css文件，但是并不负责将css具体样式嵌入到文档中，这个时候我们还需要一个style-loader帮我们处理。

css文件处理-style-loader 我们再按照文档，安装style-loader

style-loader需要放在css-loader的前面

这样我们就算配置好了，直接运行在页面中也有css样式了。

如果我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？ 这里我们以less为例，其他也是一样的。

less文件处理

我们先创建一个less文件，放在css文件夹中在官方文档中查找less-loader相关的使用说明。

首先，还是需要安装对应的loader

npm install --save-dev less-loader less

注意：我们这里还安装了less，因为webpack会使用less对less文件进行编译。

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

图片文件处理

首先，我们在项目中加入一张图片，在css样式中引用该图片，直接去normal.css中将该图片作为body的背景图。 如果我们不做任何处理直接打包的话会报错，它提示我们缺失合适的loader，需要安装我们的url-loader。

我们去官网找url-loader的配置文档，将它进行安装配置。

而我们配置好了之后发现有一个limit，这个参数是做什么用的呢？

如果大于limit的图片，会通过file-loader进行处理，所以我们需要安装file-loader。

当我们通过file-loader再次打包，就会发现dist文件夹下多了一个图片文件。

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

所以，我们可以在options中添加如下选项：

img：文件要打包的文件夹

name：获取图片原来的名字，放在该位置

hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位

ext：使用图片原来的扩展名

但是，我们打包了发现图片并没有展示出来。

这是因为图片使用的路径不对，默认情况下，webpack会将生成的路径直接返回给使用者。但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再配置一个publicPath

ES6语法处理

如果仔细阅读webpack打包的js文件，我们会发现写的ES6的语法并没有转成ES5，那么久意味着可能对一些ES6还不支持的浏览器没有办法很好的运行我们的代码。

如果希望将ES6的语法转成ES5，在webpack中我们直接使用babel对应的loader就可以了。

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

它必须有一个东西就是babel-core才能将ES6转化为ES5 @7是它的版本 bable-preset-es2015：就是ES6 如果你想转换ES6到ES5就安装这个配置，根据你想转化的不同来安装不同的配置文件。

配置文件

当我们安装且配置好了以后，运行就能将ES6语法转化成ES5语法。

webpack的loader

webpack中配置Vue

引入vue.js

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

所以，下面我们来学习一下如何在我们的webpack环境中集成Vue.js

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

npm install vue --save

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

那么接下来就可以按照我们之前学习的方式来使用Vue了 我们之前使用Vue.js是从官网上下载到本地来使用，现在我们可以使用另一个方式，通过npm安装Vue，Vue就会被安装到node_modules这个文件夹里，当安装到这个文件夹里后，我们就可以把Vue就可以当做一个模块了。然后，我们只要在任意一个js文件中写一个import Vue from 'vue'就可以了，我们没有写路径它就会去到node_modules文件夹中找这个Vue

我们安装好之后在Main.js中依赖且运用

index.html中也创建对应的div进行绑定

我们运行后没有报错但是页面中却报错了 Vue在构建的时候，在构建最终的一个发布版本的时候，它构建了两类版本：

1.runtime-only ->使用这种版本代码中，不可以有任何的template，因为它里面没有包含对template编译的代码。

2.runtime-compiler ->这个就表示代码中，可以有template，因为它有一部分代码叫compiler，可以用于编译我们的template。

这样我们就大概知道我们错在哪了，因为我们虽然没有使用template标签，但是我们挂载了app到我们的Vue的el上，那么我们挂载的app就相当于我们Vue实例的template了，使用runtime-only是无法编译出template的代码的，所以报错了。

我们如何解决这个问题呢？

我们去修改webpack的配置就可以了，我们去指定使用第二种版本就行了

如下：

el和template的区别

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

定义template属性：

在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容。

这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素。

但是如果我依然希望在其中显示{{message}}的内容，应该怎么处理呢？

我们可以再定义一个template属性，代码如下：

重新打包，运行程序，显示和之前一样的结果和HTML代码结构。

当el和template同时存在的时候，template里的内容会替换掉el绑定的组件，这样的好处就是不用再到index.html里修改我们的代码了，index.html里的代码就固定下来就只有保留一个基本id的div元素。

el和template模板的关系是什么呢？ 在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

这样做有什么好处呢？ 这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可。

但是按上图的在main函数里面书写template模块非常麻烦，一旦template里的代码量多了，写起来极不方便，结构混乱。我们能将template模板中的内容进行抽离吗？

Vue组件化开发引入

如何将上面的代码采用组件化的形式进行开发？

首先我们将template模板的内容抽离为一个组件：

在Vue实例中如何调用：

Vue实例里的template在替换之前肯定要先编译的，而里面写的它就会去到里面找这个名为APP的组件，有这个组件的话它就会按这个组件的方式解析这个组件的内容，从而将上面抽离出来的template和里面的其他内容解析到我们的实例Vue里的template里，从而替换到el绑定的元素中。

为了使main.js里看起来简洁，我们得将刚刚抽离的组件封装到一个文件里，然后调用过来，这才是我们模块化的思想。

在main.js中如何引用：

但这里还有一点不好的地方，就是模板和js代码没有进行分离。

.vue文件封装处理

现在我们以一种全新的方式来组织一个vue的组件。

这时我们创建一个新文件`Vue Component`

我们将之前APP.js中的文件复制过来

也在main函数中引用

但是，这个时候这个文件可以被正确的加载吗？

当然不可以，这种特殊的文件以及特殊的格式，必须经过loader处理才能让webpack打包。

这时我们就要同处理之前的文件一样需要进行对loader的配置

安装vue-loader和vue-template-compiler

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

然后修改我们的webpack.config.js的配置文件

当我们安装配置好后运行却发现报错了

这段报错代码的意思是，我们安装的vue-loader在被使用的时候有问题，它缺少一个`corresponding plugin`这样的插件。

为什么会这样呢？ 因为我们的vue-loader有很多的版本，我们现在是^15.8.3这个版本，从14.版本开始，如果我们想要使用这个vue-loader，还必须得另外给它配置一个插件。如果，你不想配置那个插件，我们可以用一个比较低一点的版本。

我们去到package.json文件里将配置改一下

注：`^` 这个符号它会安装大于等于后面的版本号的版本，所以如果没有当前版本它会往后面找其他更高的版本，但它不会超过开头第一个数字的版本`（拿当前版本来说，它不会找14之后的版本）`。

我们改掉里面的配置，还需要执行一项命令，这里也给我们弹出了提示。

一旦我们package.json里面的这些东西改掉的话，都需要执行一下npm install。让它根据你最新的这个配置的版本，重新去安装node_modules。

当我们安装好了之后再运行，就不会再报错了，我们的.vue文件就能进行加载和编译了。

最后拓展一个：如果也想让.vue文件和.js文件那样可以之间省略写要怎么做？

在webpack.config.js文件中对它进行配置就行了。

之后我们返回前面的调用就能简写.vue文件了

webpack配置Vue

plugin的使用

plugin是什么？ plugin是插件的意思，通常是用于对某个现有的架构进行扩展。webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化、文件压缩等等。

loader和plugin的区别？

loader：主要是用于转换某些类型的模块，它是一个转换器。

plugin：是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程

步骤一：通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）

步骤二：在webpack.config.js中的plugins中配置插件。

下面，我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩充，让我们的webpack变得更加好用。

添加版权的Plugin

我们先来使用一个最简单的插件，为打包的文件添加版权声明。

该插件名字叫`BannerPlugin`，属于webpack自带的插件。

按照下面的方式来修改wepback.config.js的文件：

最终我们去打包的.js文件中就能看到我们刚刚编辑的版权信息

打包html的Plugin

目前，我们的index.html文件是存放在项目的根目录下的

我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html，那么打包的js等文件也就没有意义了。所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件。

HtmlWebPlugin插件可以为我们做这些事情：

自动生成一个index.html文件（可以指定模板来生成）

将打包的js文件，自动通过script标签插入到body中。

安装HtmlWebPlugin插件

npm install html-webpack-plugin --save-dev

当我们安装好了之后需要先导入插件，我们要导入刚刚装的插件

使用插件，修改webpack.config.js文件中plugins部分的内容如下：

然后我们可以打开打包出来的index.html界面，发现script标签自动帮我们引入

而这时候有两个问题

第一个问题是这里的template表示根据声明模板来生成index.html另外，我们需要删除之前在output中添加的publicPath属性，否则插入的script标签中的src可能会有问题。(由上图可知我们的index.html已经被打包在dist文件夹里了所以路径就之间在同级目录而不是之前那个)

删除之前在output中添加的publicPath属性

第二个问题就是需要绑定一个<div id="app"></div>,由上图可知，打包的index.html里是没有写这行代码的，这个时候我们就要给它一个模板，在模板里写上这行代码。

我们用需要打包的那个index.html来做模板，怎样根据这个模板去生成呢？

这样打包的index.html就会照这个模板来生成

js压缩的Plugin

在项目发布之前，我们必然需要对js等文件进行压缩处理。这里，我们就对打包的js文件进行压缩

我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致。

npm install uglifyjs-webpack-plugin@1.1.1 -save-dev

修改webpack.config.js文件，使用插件

还是和之前一样先导入再引用

查看打包后的bunlde.js，是已经被压缩过了。

`注：压缩的插件和添加版权注释的插件只能用其中一个，因为压缩的插件会删除所有的注释，会将版权的注释也删除掉，所以两者不可得兼。`

webpack的plugin

搭建本地服务器

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

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

npm install --save-dev webpack-dev-server@2.9.1

这是给webpack提供开发时的服务的

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

`contentBase：`为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist

`port：`端口号（如果不指定默认8080端口）

`inline：`页面实时刷新

`historyApiFallback：`在SPA页面中，依赖HTML5的history模式（暂时不配置）

wepack.config.js文件配置修改如下：

当我们配置好了之后要怎样让它运行呢？

webpack-dev-server

运行这行语句，而我们发现却报错了

但如果我们直接在终端这样使用这个语句，它会去全局变量里找这个服务，而我们只安装在局部变量里了。我们就得去package.json里配置它就像之前webpack命令一样，给它配置一个脚本。

如图

然后我们通过运行刚刚配置的脚本就能成功运行且获得它给我们搭建好的本地服务

如果我们想直接运行这个脚本的时候自动帮我们打开网页，我们可以再在后面添加一句--open如下：

webpack-dev-server --open

`--open参数表示直接打开浏览器`

如果我们现在是在开发阶段，不建议现在在插件里使用压缩js文件的插件。因为一旦js文件进行了压缩之后，如果我们想在浏览器中调试一些js代码这个时候就非常不方便调试了，因为代码里面所有变量的名字都被改掉了。所以我们在开发阶段是不需要压缩插件的，而到了发布的时候才需要这个插件。 而到了最终编译的时候，上面配置的给webpack提供开发时的服务的本地服务器就不需要了，因为那是在开发的时候使用的。

所以我们在配置webpack的时候会遇到有些配置是在打包时候需要用到的配置，而有些配置是开发时候才需添加的配置。当遇到这种情况的时候我们可以将这些配置进行抽离，当开发时引用开发的配置文件，当打包编译时使用打包编译的配置文件。

如果我要对这两种情况的配置进行一个抽离该怎么做呢？

第一步：我们先给它建立一个配置文件 我们新建一个文件夹用来放这些配置文件 把我们webpack.config.js里的东西复制到新建的base.config.js文件中，如果我们要进行编译或者打包就直接使用我们的base就行了。

而我们的base里面是放一些公共的东西—开发时依赖，编译时也依赖的东西就可以放这里面。

第二步：再给它建另外两个js文件 base.config.js—放公共的一些配置 prod.config.js—放生产时需要的一些配置 dev.config.js—放开发时需要的一些配置

这样就可以做一些抽离了

prod.config.js：抽离的文件 dev.config.js：抽离的文件

现在为了能让公共的配置文件和这两种情况的配置文件合并到一起，必须给它装上一个东西

npm install webpack-merge -save-dev

merge：合并

然后我们在两个配置文件中分别引用合并

prod.config.js中引用 dev.config.js中引用

这时候我们就可以将直接的webpack.config.js这个配置文件删掉了

当你删掉了webpack.config.js这个文件然后运行的话，会报错。它需要你将文件命名成webpack.config.js这个名字，这时候我们就需要来到package.json脚本这里手动指定使用哪个配置文件。

而当我们进行打包的时候发现，文件并没有打包到我们之前指定的dist文件夹的位置，而是打包在build中又新建了一个dist文件夹。这是因为，指定目录的地址变了这时我们需要在给它拼接的时候让它找到上一层

imyanglan / Vue-xuexi

Vue学习笔记 day5 #7

学习地址：(https://www.bilibili.com/video/av59594689?p=75)

webpack

前端模块化打包工具

认识webpack

我们从两个点来解释上面这句话：模块和打包

当前市场上的打包工具：grunt/gulp/webpack/rollup

打包如何解释？

现在前端用的最多的就是webpack，gulp现在用的越来越少了

我们来看一个gulp的task，下面的task就是将src下面所有的js文件转成ES5的语法，并且最终输出到dist文件夹中。

什么时候用grunt/gulp呢？

grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。

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

webpack的安装

安装webpack之前首先需要安装Node.js,Node.js自带了软件包管理工具npm。

查看自己的node版本：(在命令提示符里输入)

安装了node之后就可以根据里面的npm来安装我们的webpack，全局安装webpack（这里用指定版本号3.6.0，因为Vue CLI2依赖改版本）

局部安装webpack（后续才需要）--save-dev`是开发时依赖，项目打包后不需要继续使用的。

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

webpack的起步

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

文件和文件夹解析：

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

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

main.js：项目的入口文件

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

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

package.json：通过npm init生成的，npm包管理的文件（暂时没有用上，后面才会用上）

mathUtils.js文件中的代码

main.js文件中的代码

使用webpack工具，对多个js文件进行打包

要怎样打包呢？使用webpack的指令即可。

按下回车，如果我们看见这样一层打印的话就完成打包了。

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

引入之后去到浏览器上调试就会发现我们通过模块化传入main.js的数据就正常通过浏览器显示出来了。

而文件指向就是我们打包的那个js文件

webpack的起步

webpack的配置

webpack配置这块视频要多看两遍然后展开练习，这里的知识点比较重要

当然可以，就是创建一个webpack.config.js文件

第一步：项目中需要安装自己局部webpack

第二步：通过node_modules/.bin/webpack启动webpack打包（使用局部webpack）

手动配置webpack

我们只需在scripts脚本里配置脚本就行了，如图：

我们只需在终端中写入一下代码：

webpack的配置

loader的使用

loader使用过程：

步骤一：通过npm安装需要使用的loader（不同的loader处理不同的文件）

步骤二：在webpack.config.js中的modules关键字下进行配置

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

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

如果我们仅仅将它进行打包没有给它下载配置对应的loader的话，会出现如下错误。

在webpack的官方文档中我们可以找到如下关于样式的loader使用方法：

但是当我们重新打包项目发现样式并没有生效，这是为什么？

style-loader需要放在css-loader的前面

这样我们就算配置好了，直接运行在页面中也有css样式了。

注意：我们这里还安装了less，因为webpack会使用less对less文件进行编译。

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

我们去官网找url-loader的配置文档，将它进行安装配置。

如果大于limit的图片，会通过file-loader进行处理，所以我们需要安装file-loader。

所以，我们可以在options中添加如下选项：

img：文件要打包的文件夹

name：获取图片原来的名字，放在该位置

hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位

ext：使用图片原来的扩展名

但是，我们打包了发现图片并没有展示出来。

配置文件

当我们安装且配置好了以后，运行就能将ES6语法转化成ES5语法。

webpack的loader

webpack中配置Vue

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

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

我们安装好之后在Main.js中依赖且运用

index.html中也创建对应的div进行绑定

1.runtime-only ->使用这种版本代码中，不可以有任何的template，因为它里面没有包含对template编译的代码。

2.runtime-compiler ->这个就表示代码中，可以有template，因为它有一部分代码叫compiler，可以用于编译我们的template。

如下：

这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素。

`前端模块化打包工具`

我们从两个点来解释上面这句话：`模块`和`打包`

当前市场上的打包工具：`grunt/gulp/webpack/rollup`

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

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

`main.js：项目的入口文件`

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

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

`package.json：通过npm init生成的，npm包管理的文件（暂时没有用上，后面才会用上）`

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

这时我们创建一个新文件`Vue Component`

这段报错代码的意思是，我们安装的vue-loader在被使用的时候有问题，它缺少一个`corresponding plugin`这样的插件。

注：`^` 这个符号它会安装大于等于后面的版本号的版本，所以如果没有当前版本它会往后面找其他更高的版本，但它不会超过开头第一个数字的版本`（拿当前版本来说，它不会找14之后的版本）`。

该插件名字叫`BannerPlugin`，属于webpack自带的插件。

`注：压缩的插件和添加版权注释的插件只能用其中一个，因为压缩的插件会删除所有的注释，会将版权的注释也删除掉，所以两者不可得兼。`

`contentBase：`为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist

`port：`端口号（如果不指定默认8080端口）

`inline：`页面实时刷新

`historyApiFallback：`在SPA页面中，依赖HTML5的history模式（暂时不配置）

`--open参数表示直接打开浏览器`

这时不管我们运行`npm run build`还是`npm run dev`就都没有问题了