什么是webpack，有什么作用

webpack是Vue的打包模块，适用于单页面应用程序（可显示页面数目小于500）

可以打包文件，转码编译，降级高级技术为标准下载并配置

下载并配置webpack

下载命令：npm i -D webpack webpack-cli

配置指令：在根目录---package.json---scripts节点中增加"pack":"webpack"

运行命令：npm run pack

配置相关：在根目录中新建一个webpack.config.js配置文件并导出module.exports ={}

配置项

模式配置：mode：'production' 线上模式 / 'development' 开发模式
入口文件：entry: '入口文件路径'
输出文件： output:{path:'输出目录路径',filename:'输出目录名字'}

打包html插件：html-webpack-plugin

下载插件命令: npm i -D html-webpack-plugin

配置插件：

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({
        template:'被打包的html文件路径'
    })
]

实时打包工具：webpack-dev-server
1. 下载工具：npm i -D webpack-dev-server
2. 配置工具：
```
devServer:{
    prot:1024, //服务器的端口号
    host:'127.0.0.1' //服务器的主机地址
    open:true, //自动开启浏览器
    compress:true //打包压缩的文件
}
```
3. 配置指令：在package.json---scripts节点中增加"line":"webpack-dev-server"
4. 运行命令：npm run line

webpack相关loader

css

下载处理css的loader：npm i -D style-loader css-loader

配置loader：

module:{
    rules:[ //制定文件处理的规则
       {text:/\.css$/,use:['style-loader','css-loader']}, //顺序不能变
        {text:规则2,use:['规则2的loader']}
    ]
}

less

下载处理less的loader：npm i -D less-loader less

配置loader:

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

img
- 下载处理图片的loader：npm i -D file-loader url-loader
- 配置loader：
```
{test: /\.(png|jpg|gif)$/,
  use: [{
      loader: 'url-loader',
      options: {limit: 8192}
    }]
}
```
  注：一般只对小于10kb的图片进行base64转码
es6/es7
- 下载用于降级es6/7高级语法的loader：babel-loader(官网地址：https://babel.docschina.org/)
  
  运行指令：npm i -D babel-loader @babel/core @babel/preset-env
- 配置loader：
  - 在webpack.config.js文件中，增加rules规则
```
{
    test: /\.js$/,
    exclude: /node_moudles/,  //表示对应的目录不需要babel-loader处理
    use: 'babel-loader'
        
}
```
  - 根目录下创建.babelrc文件并配置
```
{
    "presets": ["@babel/preset-env"], //让babel-loader找到preset插件来处理
}
```
- preset可以处理大多数es6高级标准，如果是一些冷门内容需要下载配置对应的loader
  - 去babel官网查询需要的plugin插件
  - 通过npm下载安装
  - 在根目录下的。babelrc文件中给插件配置
webpack中配置Vue
- 下载安装Vue插件:npm i vue
- 在文件中应用
  - 通过es6标准语法引入模块import Vue from 'vue.js所在路径'
    
    注：此处直接写vue，默认引入的是vue.runtime.js文件，该文件只能解析render成员的数据

vue组件loader：

下载安装：运行指令：npm i -D vue-loader vue-template-loader

配置：

在webpack.config.js文件中，添加rules规则

{
        test: /\.vue$/,
        use: 'vue-loader'
      }

在plugins引入插件，让vue单文件组件可以被loader解析

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin() //可以让vue单文件组件可以被各种loader解析
  ]
}

component组件

组件的作用

提高开发速度
方便代码的复用
让程序员专注于业务逻辑

全局组件

语法：Vue.component('组件名称',{组件的对象成员})

例如：

Vue.component('my-page',{
  template:`
    <ul>
      <li>上一页</li>
      <li>[1]</li>
      <li>2</li>
      <li>[3]</li>
      <li>下一页</li>
    </ul>
      `,
})
注：组件中的DOM结构，只能有一个根元素来包裹

页面使用组件：<div id = "app"><my-page></my-page></div>

组件成员

组件是特殊的vue实例，拥有和vue实例相同的成员
组件中的data成员必须是一个function，并return一个字面量对象，vue实例中data一般是字面量对象（vue实例中也可以设置成function）
组件中通过template属性来指定组件的结构，vue实例中一般是el属性来关联容器（vue实例也可以用template覆盖容器）
组件和vue实例都有生命周期函数，私有过滤器，methods处理函数

Vue.component('my-page',{
  created(){  // 生命周期函数
    console.log('组件的created被执行了');
  },
  template:`
    <ul>
      <li>{{ prev }}</li>
      <li>[1]</li>
      <li>2</li>
      <li>[3]</li>
      <li @click="clk">{{ next }}</li>
    </ul>
    `,
  data(){   // data成员
    return {prev:'上一页',next:'下一页'}
  },
  methods:{ // methods成员
    clk(){
      console.log('进入下一页');
    }
  }
})

私有组件

私有组件是在vue实例components顶级成员中定义的组件，只能在当前实例中使用一次

语法：

components:{
    '组件的名称': { 组件的配置对象成员 }, 
    '组件的名称': { 组件的配置对象成员 }...
}

单文件组件

定义：把组件的内容写到一个.vue结尾的文件中
优点：提高代码的观赏性，易于维护

创建单文件组件

每个vue文件由三部分组成：

tempalte：结构必写
script：行为
style：样式

在js文件中引入组件并注册

import 名称 from '单文件组件的路径'
Vue.component('组件名称',引入的名称和上面对应)

在html中使用组件

<组件名称></组件名称> //和上面定义的名称一致

webpack打包工具（不含脚手架）