webpack是用来打包项目的,也可以帮助到后面vueCli(脚手架)的学习

本文章为观看B站codewhy老师教学视频自学vuejs过程中记录的笔记，对视频进行了清晰的整理。(帮大家节省自己整理笔记的时间啦,剩下的时间一定要去上机实操,多多练习!!)ps：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili（附上视频链接！)

如何理解？ 假设我们需要寄快递。我们将许多的物品都放进了一个纸皮箱，然后进行封箱。 这就是打包。 对应到前端开发来说，就是将很多的的 css文件，js文件等“物品”，全都写进一个js文件，而不是在一个html页面通过script,link标签去引入多个静态资源。

其实不同的css，不同的js就是一个模块。比如说，一个index.html,通常会有一个index.css,一个index.js，还有其他的css，js。这些不同的文件都可以看做不同的模块。不同的模块有各自的作用。

：用这个工具，帮助我们将不同的资源和文件，进行打包，也就是合并在一个文件里面。 但是不仅仅 如此，它还附加了一些更好用的功能。

作用：进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less编译成css，ES6 语法 转成 ES5等等。

这时，我们如果打开控制台，就会发现在html页面通过script,link等标签引用的静态资源， 浏览器会再次发出请求去获取这些资源。但是webpack的打包，将所有的静态资源都合并好了，减少了io请求。

grunt/gulp的核心是Task我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css） 之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。 所以grunt/gulp也被称为前端自动化任务管理工具。什么时候用grunt/gulp呢？如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。 只需要进行简单的合并、压缩，就使用grunt/gulp即可。 但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。所以，grunt/gulp和webpack有什么不同呢？grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

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

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

但是真正做项目时,并不会使用输入webpack来进行打包,而是用npm run build来进行打包(当然这里的build是自定义的)

(这个包一定在一开始创建项目的时候就创建好了,这里讲并不代表到这里才能创建package.json,而是旨在重温如何创建package.json)

这个还有一个好处:如果不采用这种形式而是老方法,打包时会默认用全局的webpack版本;但如果使用该方法,会首先采用局部的,如果没有再采用全局的

目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢？ 因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。

所以通常一个项目，都有自己局部的webpack。 这里我们让局部安装webpack3.6.0

css-loader只负责加载css文件,但不负责将css具体样式嵌入到文档中

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

首先，我们在项目中加入两张图片：一张较小的图片test01.jpg(小于8kb)，一张较大的图片test02.jpeg(大于8kb),待会儿我们会针对这两张图片进行不同的处理

图片处理，我们使用url-loader来处理，依然先安装url-loader

再次打包，运行index.html，就会发现我们的背景图片选出了出来。 而仔细观察，你会发现背景图是通过base64显示出来的，这也是limit属性的作用，当图片小于8kb时，对图片进行base64编码 ![在这里插入图片描述](

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

但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确，默认情况下，webpack会将生成的路径直接返回给使用者。但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/

打包项目 – 错误信息 打包过程没有任何错误(因为只是多打包了一个vue的js文件而已)但是运行程序，没有出现想要的效果，而且浏览器中有报错

这个错误说的是我们使用的是runtime-only版本的Vue，什么意思呢？ 这里我只说解决方案：Vue不同版本构建，后续我具体讲解runtime-only和runtime-compiler的区别。 所以我们修改webpack的配置，添加如下内容即可:

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

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

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

在以上代码中可以看出:第3行到第22行其实就是一个对象,那我们就可以将这一段代码封装在app.js文件中(在该文件中再模块化导出),再在main.js中导入即可

在不使用该插件之前,dist文件夹里是没有index.html文件的,但是发布的dist文件夹中必须有该文件

这里的template表示根据什么模板来生成index.html 另。