Vue.js进阶系列(15)--Webpack基本使用和配置文件

  就在昨天，经过小编没日没夜的辛勤付出，终于怂恿到了Webpack成功入驻我们的Vue项目中，有句俗话说的好：“是你的就是你的”。既然Webpack已经入驻我们Vue项目了，那总要干点活才能体现它的人生价值，下面我们一起来看看Webpack是如何工作的吧。

image.png

一、Webpack 基本工作

1.Webpack产生的原因

  大家是否还记得“模块化”一族的故事，他们一族一直想要通过巴结“浏览器”来咸鱼翻身，但是“浏览器”是个什么角色，根本不买他们的帐，只买我Webpack的帐，所以呢，好人做到底，送佛送到西，我的任务也就变成了帮助“模块化”一族和“浏览器”大哥拉近关系。
【在开发过程中，模块化的代码时不能够被浏览器识别的，必须经过webpack的打包才能被浏览器识别】

2.Webpack工作流程

  每次帮“模块化”跟“浏览器”大哥拉近关系之前，我都会叫“模块化”他们将礼物都送到src先生哪里，然后我就从src先生哪里接过礼物，送到“浏览器”大哥的小弟dist中。
【①项目结构：在项目开发的时候，一般有会两个文件夹：src和dist。src主要存放开发时写的源代码；dist主要存放要部署到服务器上的文件，当浏览器要解析某些文件时，直接将dist下的文件全部发送到服务器中即可】

image.png

【②工作原理：将src下的js文件通过webpack命令发送到dist中，当浏览器要解析某些文件时，直接引用dist下的文件即可。比如：】
  2.1 在src下创建了三个文件：index.html index.js main.js 。index.js中用ES6模块化的思想定义了两个简单的函数add和mul。main.js则是调用index.js中的两个函数：

image.png

image.png

  2.2 通过webpack打包文件：在终端（cmd命令行）先进入到自己项目的目录，输入命令：webpack 入口文件 出口文件。比如webpack ./src/main.js ./dist/bound.js，是将src下的main.js文件打包到dist下的bound.js文件。

image.png

image.png

  2.3 引入dist下的文件： 在index.html中听通过script引入文件 bound.js。我们不能直接在index.html中引用main.js文件，因为一些浏览器是不指出ES6模块化开发的。

image.png

结果.png

  上面呢就是我webpakc最最基本的工作。所谓能力越大责任也越大，所以下面我为你们讲述一下我还有那些高强度的工作。

二、webpack配置文件

1.出入口文件的配置：webpack.config.js

  日子久了之后，我就发现，每次都需要从src哪接过礼物，然后再通过dist传递给“浏览器”大哥，工作效率十分低下，所以我也决定，雇佣 config小弟来帮我跑跑腿。
【①config产生的原因：每次我们都需要在终端输入 “webpack 入口文件 出口文件”的命令，才能将入口文件打包后部署到服务器中。所以我们希望直接在终端输入“webpack”就能自动帮我们打包好相应的文件】
其实config小弟的工作也很简单，只需要知道礼物从哪里来又要走什么样的路到哪里去就行啦。
【②config工作思路：将入门文件和出口文件放到config中，然后直接在终端输入“webpack”实现自动打包，所以我们需要知道哪个是入口文件，哪个是出口文件以及出口文件的路径】
【③ 创建config步骤：1.创建 webpack.config.js文件 2.引入入口文件和出口文件 3. 动态获取webpack.config.js文件的路径 4.执行webpack命令】
3.1 创建 webpack.config.js文件
  文件名一定一定一定是webpack.config.js

image.png

3.2 引入入口文件和出口文件
  通过CommomJS模块化导入文件，entry代表入口文件，值是文件名；output代表出口文件，值必须是对象，对象内部有两个属性 path和filename，分别代表出口文件的路径和文件名，具体代码如下图所示：

module.exports={
    //入口文件
    entry:"./src/main.js",
    //出口文件
    output:{
        path:"./dist",
        filename:"bundle.js"
    }
}

image.png

  结果告诉我们 ./dist 不是绝对路径。绝对路径嘛，简单吖，直接改成“C:\Users\jer-pc\Desktop\Vue\01-Vue引入\Webpack配置文件”。小编可以很负责的告诉你，这样子更是大错特错。因为不是所有用户的路径都符合你上述的路径。因此我们需要通过node语法来动态获取当前 webpack.config.js的路径。
3.3 动态获取webpack.config.js文件的路径
  首先，导入path模块。通过node的语法导入path模块，该模块中存在一个名字叫“path”的包，这个包并不是我们开发人员创建的，是一个依赖node而存在的包，所以我们需要通过npm init 初始化来导入我们所需要的包 [ 在初始化之后就会生成一个json文件，当我们想要单独依赖node环境时，就需要创建这个文件 ]。初始化时，目前只需要填写文件名，最后确认即可。具体看下面的代码图：

//导入 path模块
const path = require('path')

npm init 初始化过程.png

成功创建json文件.png

  然后，填写具体的路径。在path模块中有个叫resolve的函数，它的作用拼接两个文件的地址，第一个参数是node中自带的全局变量__dirname，它的作用是获取当前项目中webpack.config.js的路径；第二个参数是出口文件所放的目录。具体见下面的代码：

//导入path模块
const path = require('path')
//填写路径
module.exports={
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"bundle.js"
    }
}

3.4 执行webpack命令
  在终端输入“webpack”命令，就可以实现自动化打包相应的文件，具体见下图：

终端输入webpack命令.png

console控制台打印的结果.png

2.局部安装webpack

①为什么要局部安装？
  webpack版本很多，并不是所有的项目都适合用一个版本的webpack，所以为了适应项目的需求，一般都会采用局部的webpack【局部的webpack也叫本地webpack】，和人要穿适合自己尺码的衣服一个道理。
②如何使用局部webpack
  打开package.json文件，找到script所在的位置，然后用变量来存放webpack，最后再终端通过输入“npm run 变量名”执行。

image.png

image.png

  以上就是今天小编要带给大家的webpack基本使用和webpack配置文件，配置文件主要通过config配置了出入口文件和局部安装webpack。内容似乎有点杂乱，还请大家多多包容小编的文笔O(∩_∩)O哈哈

❤记得给小编点赞唷❤