想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第7天！
(不过今天好像都是webpack的相关内容TT，只有一点点关于vue的配置)

起起伏伏乃人生常态，继续加油～

学习内容

• 1. webpack的基本使用
• • 准备工作
  • js文件的打包
  • 使用打包后的文件
• 2. webpack.config.js文件
• 3. 使用npm init初始化项目
• 4. 局部安装webpack
• 5.package.json中定义启动
• 6. webpack-loader
• 7. webpack-css文件处理
• • 准备工作
  • 打包报错
  • style-loader、css-loader
• 8. webpack-less文件的处理
• • 准备工作
• 9. webpack-图片文件的处理
• • url-loader
  • file-loader
  • • 修改文件名称
• 10.webpack-ES6转ES5
• 11. webpack配置vue
• • 打包vue-错误信息

1. webpack的基本使用

准备工作

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

• dist文件夹：用于存放之后打包的文件
• src文件夹：用于存放我们写的源文件
  • main.js：项目的入口文件
  • mathUtils.js：定义了一些工具函数
• index.html：浏览器打开展示的首页html

mathUtils.js中的内容：

main.js中的内容：

js文件的打包

• 现在的js文件使用了模块化的方式进行开发，他们可以直接使用吗？不可以
  • 如果直接在index.html引入这main.js、mathUtils.js文件，浏览器并不识别其中的模块化代码
  • 另外，在真实项目中有许多这样的js文件时，我们一个个引用非常麻烦，并且后期管理不便
• 这时我们应该使用webpack工具，对多个js文件进行打包
  • webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理。
  • 另外，如果在处理完所有模块之间的关系后，将多个js文件打包到一个js文件中，在index.html中引入也很方便
• 如何打包呢？使用webpack的指令即可
  （记得要先进入这两个js文件所在文件夹，再输指令）
  
  跳出这个就是成功了：
  

使用打包后的文件

打包后会在dist文件下，生成一个bundle.js文件

• 文件内容有些复杂，这里暂时先不看
• bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要在index.html中引入这个 bundle.js文件即可
  
  index.html控制台成功输出：
  

2. webpack.config.js文件

• 如果每次使用webpack的命令都需要写上入口和出口作为参数，会非常麻烦
• 我们可以将这两个参数写到配置里，在运行时，让它直接读取
• 创建一个webpack.config.js文件
  

但是这里的require('path')依赖于node相关的包，所以要先用npm init去初始化这个项目

3. 使用npm init初始化项目

使用npm init会生成一个package.json文件，这个文件主要用来记录这个项目的详细信息，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个文件中

在终端输入npm init

之后会让我们配置一些信息
（没填的地方直接回车）

成功生成 package.json

4. 局部安装webpack

当我们配置完webpack.config.js文件后，我们在终端输入webpack就可以进行打包了，但是此时我们使用的是全局的webpack，如果我们想使用局部webpack来打包呢？

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

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

• 这里我局部安装了webpack3.6.0
  (和我全局安装的版本是一样的)
  npm install webpack@3.6.0 --save-dev
• 安装成功以后会生成这个node_modules文件
  
  package.json也会自动生成这部分
  

第二步：在终端中输入node_modules/.bin/webpack启动局部webpack打包(如果输入webpack，使用的是全局webpack)
但是，每次启动局部webpack打包都要输入node_modules/.bin/webpack一长串命令很不方便

• 我们可以在package.json的scripts中定义自己的执行脚本

5.package.json中定义启动

在scripts中添加这条"build":"webpack"命令，scripts中的脚本在执行时，会按照一定的顺序寻找命令对应的位置

• 首先，会寻找本地的node_modules/.bin路径中对应的命令
• 如果没有找到，就去全局的环境变量中寻找
• 如何执行build命令？
  • 终端输入npm run build即可
  • 这里会启动局部webpack，如果没有才会启动全局webpack

6. webpack-loader

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

7. webpack-css文件处理

准备工作

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

⚠️：此时就算在normal.css中写了样式，也不会在index.html中生效

• 因为我们并没有在index.html引用它
• 而且webpack也不可能找到它，因为只有一个入口，就是在webpack.config.js中设置的entry为main.js
  
• webpack会从main.js开始查找其他依赖的文件，然后一起打包，显然此时这里只依赖了mathUtils.js，所以不可能找到normal.css

⚠️：我们需要在main.js中与normal.css建立依赖

打包报错

在入口main.js建立了与normal.css的依赖以后，我们再次尝试打包，因为前面已经配置好了，现在启动局部webpack打包只需要用npm run build即可

但是报错了，于是我们应该去webpack官网找到对应的loader

style-loader、css-loader

安装style-loader、css-loader：

• 终端输入npm install css-loader、npm install style-loader
• 这里我安装的css-loader版本是2.0.2，style-loader版本是0.23.1
• npm install --save-dev css-loader@2.0.2、npm install --save-dev style-loader@0.23.1

根据官方，我们需要在webpack.config.js中添加如下配置：

（⚠️一下我的注释）

然后在npm run build，打开index.html就会发现样式生效了

8. webpack-less文件的处理

如果想要在项目中使用less、scss、stylus等CSS预处理器来写样式，webpack同样也可以帮我们处理

• 这里以less为例
  (vscode有插件可以将less编译为css，就直接打包css文件，可以跳过这个part)

准备工作

我们先创建一个less文件，依然放在css，依然放在css文件夹中
和css文件处理的步骤一样

• 先在main.js中建立依赖
  
• 安装（我这里指定了less-loader版本4.1.0，less版本3.9.0）
  npm install --save-dev less-loader@4.1.0 less@3.9.0
• 在webpack.config.js中添加配置
  
  然后在npm run build，打开index.html就会发现样式生效了

9. webpack-图片文件的处理

在刚刚的normal.css中设置一张图片为背景图
现在直接尝试打包，会报错

url-loader

图片处理，我们使用url-loader

• 安装url-loader（我这里指定了url-loader版本1.1.2）
  npm install --save-dev url-loader@1.1.2
• 修改webpack.config.js配置文件：
  

file-loader

当图片小于设置的limit属性时，打包时会对图片进行base64编码，那如果大于设置的limit属性呢？
目前尝试打包，还是会继续报错，所以当大于设置的limit属性时，要通过file-loader处理

• 安装file-loader：（我这里指定了file-loader版本3.0.1）
  npm install --save-dev file-loader@3.0.1
• 当安装完，再次打包，就会发现dist文件夹下多一个图片文件，这是webpack帮我们自动生成的
  

修改文件名称

• webpack帮我们自动生成的文件名是一个32位哈希值，但是在真实开发中，我们应该对打包的图片名有一定的要求
• 比如，我们可能会将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复
• 我们可以在options中添加上如下选项：
  • img：文件要打包到的文件夹
  • name：获取图片原来的名字，放在该位置
  • hash:8：为了防止图片在同一个文件夹中名字冲突，依然使用哈希值，只是我们只保留8位
  • ext：使用图片原来的扩展名
    
• 这个时候再打包，发现运行不报错了。但是index.html中图片未能正常显示
  • 默认情况下，webpack会将生成的路径直接返回使用，打开index.html的控制台，这个时候引用的url是错误的
  • 因为我们的整个程序是打包在dist文件下的，index.html在src文件中，所以我们希望能在路径下自动添加一个../dist
    
• 解决方法：在webpack.config.js文件中，配置publicPath：
  （在之后index.html可能也要放进dist文件夹，到时候还要改）
  
  之后再打包，能成功显示啦
  

10.webpack-ES6转ES5

• 对于前面webpack打包的js文件，部分ES6语法还未转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码
• 在前面我们说过，如果希望将ES6的语法转成ES5，就需要使用babel
  • 而在webpack中，我们直接使用babel对应的loader就可以了
    • npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
  • 配置webpack.config.js文件
    
    重新打包，查看bundle.js文件，会发现其中的内容已经变成了ES5的语法

11. webpack配置vue

• 后续会使用Vuejs进行开发，而且会以特殊的文件来组织vue的组件
  • 下面要学习如何在webpack环境中集成Vuejs
• 希望在项目中使用Vuejs，必然需要对其有依赖，所以先进行安装
  ⚠️：因为后续是在实际项目中也会使用vue的，所以并不是开发时依赖，不用加-dev
  （这里我指定了版本2.5.21）
  npm install vue@2.5.21 --save
• 在main.js和index.html中使用vue
  
  但是，会报错！

打包vue-错误信息

这个错误说的是我们使用的是runtime-only版本的vue，编译不了模版

• 我们需要修改webpack的配置，添加如下配置即可
  

今天就只学一些webpack配置了，因为我下载的都是指定的版本，现在的新版本可能对一些处理有了不同方法，具体还是参考webpack官网 https://webpack.js.org