Vue之webpack的使用

---

一、webpack的基本使用

解释：为什么使用webpack，主要就是为了模块化，方便管理维护代码。

1. webpack的作用：就是把JS相互依赖的模块打包，然后把这个包直接放在服务器就可以运行了
2. webpack基于nodejs使用，换句话说要使用webpack就需要安装nodejs
3. 使用node的npm命令安装webpakc

//下面是模块info.js
const name = "张三"

const age = 18;

export { name, age };
---------------------------------------------
//下面是模块main.js
import { name, age } from './info'

console.log(name);

console.log(age);

------------------------
//下面是目录结构
webpakck的使用
|
|___src
|	|__info.js
|	|__main.js	
|
|___dist
|
|___index.html

//dist文件夹存放打包生成好的js文件，index.html直接引用dist生成的js文件
//src存放开发时的源码

/*
怎么打包？
解释：首先在cmd窗口或者vscode自带的终端(以管理员权限打开),进入"webpakck的使用"这个文件夹
然后使用"webpack ./src/main.js ./dist/boundle.js"命令
这个命令的意思就是：把src文件下的main.js文件打包到dist文件，并在dist文件夹下生成boundle.js文件

注意：在main.js中依赖的其他模块webpack都会自动导入。模块与模块之间的依赖网不需要我们关心

最后生成的boundle.js文件就是所有模块打包后生成的文件，在index.html中只需要使用这个文件就可以了

*/

二、webpack配置文件和指令

1. 为什么要使用这两个配置文件，他们有什么作用

1.webpack.confing.js

关于webpack.confing.js

解释：
1.在"一"中打包使用的是具体名字具体路径：即"webpack ./src/main.js ./dist/boundle.js"命令
2.假设文件名十分长，这样写是不合理的，此时需要一个类似快捷指令的方式来代替完整指令，这个快捷指令就是webpack
3.使用快捷指令需要一个配置文件来设置这个指令所映射的路径，这个配置文件就是"webpack.confing.js"固定名字
----------------------------------
const path = require('path');

module.exports = {

  entry: "./src/main.js",

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  }
}

代码解释：
1.const path = require('path');
疑问：这里表示导入一个包，但是在上面的目录结构中并没有path
解答：因为webpack是基于node运行的，其实这里使用的是nodejs的包，需要使用npm init命令来导入
疑问：为什么要使用这个包
解答：因为入口需要绝对路径，使用这个包下面的函数可以获得绝对路径

2.module.exports={}
解答：
这是commonJs模块化规范，在webpack.confing.js只能使用commonJs规范，不能使用ES6模块化规范

ES6模块化规范举例：
export { name, age };
import { name, age } from './info'

3.entry: "./src/main.js",
表示的是从哪个文件开始打包，即打包的入口。就是"webpack ./src/main.js ./dist/boundle.js"中的"./src/main.js"

4.output:{}即打包后的文件放在哪里，也就是出口

path：这里必须是绝对路径，

path.resolve(__dirname, "dist")
使用这个函数获取绝对路径，__dirname就是当前文件的绝对路径，dist就是这个路径下的文件夹
(其实是把当前文件的绝对路径和这个dist做了拼接组成了一个新的绝对路径)

filename：这是打包后生成的文件名，是放在上面这个路径下的
----------------------------------

2.package.json

关于package.json

写了const path = require('path')这行代码之后并不是就能直接用node的核心包了，
需要执行一个指令，"node init",回车后填写一个包名，其他全默认。执行完就会产生package.json这个文件

package.json这个文件也会依赖其他的node包，此时使用"node install"指令把相关的包全部引入
此时生成"package-lock.json"（不知道有什么用）


最后使用快捷指令"webpack"来进行打包

上面全部完成后此时的目录结构

webpakck的使用
|
|___src
|	|__info.js
|	|__main.js	
|
|___dist
|	|__bundle.js
|
|___index.html
|
|___package.json
|
|___webpack.confing.js
|
|___package-lock.json

3.npn run xxx

npm run xxx映射的使用

解释：webpack命令映射了入口和出口，但是有些情况下，webpakc指令后面还需要加一堆很长的指令，
此时这个指令也可以被npm run xxx映射，映射写在package.json文件中

package.json文件代码如下
------------------------------------------
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
需要在script中写映射命令，举个例子：此时执行npm run test执行的就是test映射的命令
------------------------------------------


------------------------------------------
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "bulid":"webpack"
  },
  此时执行npm run bulid 执行的就是webpack命令
------------------------------------------

npm run xxx 也可以映射其他命令

使用webpack命令和npm run xxx的区别
1.webpack命令：使用的是全局安装的webpack
2.npm run命令：使用的是本地安装的webpakc,没有则找全局
3.如何安装本地的webpack：使用"npm install [email protected] --save-dev"命令

三、webpack的loader

注意：每安装一个loader都需要在webpakc.confing,js文件修改配置

1.使用loader处理css文件

1. loader是什么：是webpack的一个核心概念，通过npm可以安装loader，不同的loader打包不同的文件
2. 为什么使用loader：在一个项目中，不仅仅有js文件，还有css和img文件等等…，而最原始的webpack只支持打包js文件，此时使用loader可以对css，img，视频等进行打包，不同的文件使用不同
   的loader
3. 如何使用loader对css文件进行打包

补充：webpack官网有使用教程

1.cmd进入文件夹，使用"npm install --save-dev css-loader"命令下载打包css文件的loader
注意：css的loader只负责打包加载css文件，不负责把样式渲染到页面

2.使用"npm install --save-dev css-loader"安装style的loader//style的loader负责把样式渲染到页面
注意：两个loader要和webpack版本对应

3.在webpack.confing.js文件里面配置两个loader，如下
------------------------------------------------------
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
//这个module是style和css的loader配置
  module: {
    rules: [
      {
        test: /\.css$/,
        //webpack使用多个loader时是从右往左执行的，所以cssloader在右边
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
4.创建一个css文件，并在main.js中导入。（不然我干嘛要下载loader？？）

5.使用npm run build 指令，使用之后会提示安装CLI，不安装无法生效。安装之后就可以js和css都可以生效了

最需要注意的就是webpakc和loader的版本对应问题，超级重要

目录结构最好js和css分离，此时的结构

webpakck的使用
|
|___src
|	|__css
|	|	|_myCss.css
|	|	
|	|__js
|	|	|_info.js
|	|	
|	|__main.js//文件的乳沟不需要写在js文件夹里
|
|___dist
|	|__bundle.js
|
|___index.html
|
|___package.json
|
|___webpack.confing.js
|
|___package-lock.json

梳理总结：
1.安装node
2.创建项目
3.终端进入项目，使用node的命令npm xxx 安装webpack
4.创建模块，就是在src/js下面写js代码，这些模块可能相互引用
5.创建主模块，即main.js
6.在css文件夹中写一下css
7.在主模块中导入css
8.创建webpack.config.js文件，写上出口和入口
9.出口需要时一个绝对路径，所以需要导入node模块path
10.初始化node模块："npm init"
11.此时生成package.json文件，在script标签映射指令，然后使用"npm install"导入文件依赖的所以包或者模块
12.安装css和style的loader
13.最后执行npm run xxx,此时会提示安装CLI，安装完成就可以了
14.把生成的js文件引入到index.html就可以使用了

2.使用loader处理图片视频等资源

1. 遇到一个坑，webpack4之前的需要下载url-loader才能处理，后来我用的5，不需要装，直接就npm run可以使用
2. webpack4以下需要装url-loader，但是当文件过大的时候又报错，需要装file-loader。limit来设置url-loader可处理的文件大小，大概就是这意思，我也没搞懂，反正最新版啥都不用装，用就完事了

四、webpack引入vue

1. 引入vue的三种方式

1.文件夹引入
2.cdn
3.npm 安装

1.使用npm引入

1. 首先使用指令npm install vue (可以直到版本)
2. 在需要使用vue的文件夹导入，比如import Vue from "vue";
3. 此时就可以使用vue了…吗？
4. 此时还需要再webpakk.config.js配置，不然是不能用的

module.exports = {
  entry: "./src/main.js",

  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
   //配置这个
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
//为什么要配置这个？
//因为vue其实是有两种版本的，一种是runtime only版本，一种是runtime compiler版本
//only版本不能编译template，compiler可以编译，这个例子中把div当成了template，而且
//默认使用的也是only版本，需要配置这个，换一下版本才能正常编译
-------------------------------
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
-----------------------------------
import Vue from "vue";

const app = new Vue({
  el: "#app",
  data: {
    message: " this is message"
  }
});

五、.vue文件的使用

先看代码

index.html代码

<div id="app">
</div>
----------------------
js文件代码

import Vue from "vue";

const app = new Vue({
  el: "#app",
  template: `
  <div>
    <h1>{{message}}</h1>
  </div>
  `,

  data: {
    message: " this is message"
  }
});

/*
在一个vue实例中，同时存在template和el，编译后template的代码会替换el对应的html代码

为什么这样做？
解释：在真是开发中，index的代码时不会改变的，这样做是为了避免修改index.html的代码

*/

DOM图

---

第一次优化

template可以抽离成一个组件
----------------------------------------------
const App = {
  template: `
  <div>
    <h1>{{message}}</h1>
  </div>
  `,
  data () {
    return {
      message: " this is message"
    }
  }
}
//3.这些组件代码都可以单独写一个js文件导出，然后在需要使用的地方导入就可以
--------------------------------------------
import Vue from "vue";
const app = new Vue({
  el: "#app",
  //1.以前都是在html代码中的template使用组件，现在是在template属性里面使用，其实都是一样的
  //2.这个组件最终会替换el对应的html代码
  template: "",
  components: {
    App:App
  }
});
//4.如果把组件单独写了一个文件，可以在这里导入，这样就分离了，看起来不是很乱

第二次优化

下面是cpn.js文件代码

export default {
  template: `
  <div>
    <h1>{{message}}</h1>
  </div>
  `,
  data () {
    return {
      message: " this is message"
    }
  }
}

------------------------------------
下面是main.js文件代码

import Vue from "vue";
import App from "cpn.js"//导入组件并命名未App
const app = new Vue({
  el: "#app",
  template: "",
  components: {
    App:App
  }
});

第三次优化(重要)

此时发现cpn.js文件的template并没有分离，这就需要使用后缀为vue的文件来创建组件了
-----------------------------------------------------------
cpn.vue代码

<template>
    <div>
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: " this is message"
    }
  }
}
</script>

<style>
//这里写样式
</style>
-----------------------------------------------------------
main.js代码

import Vue from "vue";
import App from "./vue/cpn.vue"//从引入js文件到引入vue文件

const app = new Vue({
  el: "#app",
  template: "",
  components: {
    App: App
  }
});
---------------------------------------------------------
此时重新进行打包是不能运行的，因为多了一个vue文件，需要安装loader才可以
1. vue-loader 加载vue文件
2. vue-tempalte-compiler 编译vue文件
3. 使用命令：npm install vue-loader vue-tempalte-compiler --save-dev 
4.然后再webpack.config.js的module里配置vue-loader

注意：编译器和加载器需要一起安装，vue-loader13以上需要安装插件才能使用

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  },

  plugins: [
    new VueLoaderPlugin(),
  ],

}

六、Plugin的使用

解释：略