vue笔记-webpack篇-webpack基本使用

1.模块化开发概念

没有模块化的时候多人开发是这样的

<script>
  <!--张三的代码-->
  let zp1 = 'zp1'
  console.log(zp1)
</script>

<script>
  <!--李四的代码-->
  let lp1 = 'lp1'
  console.log(lp1)
</script>

若是能保证多我的中的代码不会出现相同名称的话，不使用模块化也是没问题的，可是若是多我的的代码中存在相同的变量或者函数时就会出现问题了

<script>
  <!--张三的代码-->
  let zp1 = 'zp1'
  console.log(zp1)

  let p2 = 'zp2'
  console.log(p2)
</script>

<script>
  <!--李四的代码-->
  let lp1 = 'lp1'
  console.log(lp1)

  let p2 = 'lp2'
  console.log(p2)
</script>

若是变量使用var定义的话就会出现被覆盖的现象，此时就须要张三或李四修改各自的代码才行，当多人协做的时候这种状况会出现的更加频繁，太多的时间浪费在这种无心义的事情上了，可是若是有模块化，就能够避免这种问题了
假设张三的代码在modelA模块中，李四的代码在modelB中，当须要使用张三的代码时，须要将张三的模块modelA导入，访问时使用模块名+变量或函数名访问，这种方式下只要保证模块名不重复就能够避免访问变量或函数时出现重复的状况

2.多种规范下的模块化标准

目前的模块化标准存在多个，amd、cmd和es6标准，每一个标准对应的导入导出模块等关键字不相同，vue中使用的是es6的模块化标准
es6模块化标准规定导出一个变量、对象、函数时使用export关键字，导入时使用imort关键字

<meta charset="UTF-8">
  <title>Title</title>




<script src="main.js" type="module"></script>

import zobj from './modelA.js'
import lobj from './modelB.js'

console.log(zobj.name)
console.log(lobj.name)

let obj = {
  name: 'zhangsan'
}

export default obj

let obj = {
  name: 'lisi'
}

export default obj

能够看到经过模块化的方式能够避免同名变量出现覆盖或报错的状况
从模块中能够导出变量、函数、对象，默认只能有一个是default，导出default时容许在导入时自定义名称，不然就须要使用导出时定义的名称

export const p1 = 'p1'
export function m1(){
  console.log('m1')
}

import * as zs from './modelA.js'

console.log(zs.p1)
zs.m1()

3.webpack的做用

首先看下官方网站的介绍

左边的是项目开发中各类各样的文件，经过webpack能够将这些分散的文件打包为一个总体，好比将项目中多个js文件打包到一个js文件中，最后输出的目录中只存在一个html、一个js和一些资源文件
经过一些配置就能够实现项目自动的打包功能了，webpack中有一些核心的概念
入口：webpack从哪一个文件开始打包
输出：打包完成后须要输出哪些信息，放在哪一个目录下
loader：处理每一个类型的文件，好比打包到sass结尾的文件时，就会调用对应的loader进行处理
插件：打包优化，资源管理，注入环境变量等各类各样的任务，比loader更强大

4.hello world

首先安装webpack，在安装webpack前须要先安装npm，以后使用npm命令安装webpack

输入webpack命令能查看版本说明已经安装成功了

建立以下目录结构

其中webpack.config.js就是用来配置webpack打包信息的，此名称为默认名称，当执行webpack命令时会首先查找该名称的文件，在此文件中配置入口、输出、loader等信息

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

能够看到webpack的配置也是一个对象，其中入口文件为index.js，输出路径为当前路径下的dist目录，输出文件名为bundle.js
接着是使用模块化开发后的代码
index.js

import bar from './bar';

bar();

bar.js

export default function bar() {
  //
}

helloworl.html

<meta charset="UTF-8">
  <title>Title</title>




<script src="dist/bundle.js"></script>

在命令行中输入webpack命令进行打包

命令结束后就会在当前目录下生成bundle.js文件了，此文件像普通的js文件同样在html中引入后便可使用

5.webpack解析其余文件的方式

webpack默认支持js文件的打包，若是想打包其余文件，则须要安装对应的loader才能够
具体的loader使用方式参考文档https://v4.webpack.docschina.org/loaders/

css loader

安装

npm install --save-dev css-loader

配置

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

当在js中遇到导入css语句时，就会使用此loader进行打包

import css from 'file.css';

vue-loader

和webpack中的loader类似，vue官方为了更好的分离vue代码，提供了一个loader负责解析特定的vue格式https://vue-loader.vuejs.org/zh/
用法和webpack中的loader相似，首先须要安装

npm install -D vue-loader vue-template-compiler

接着在webpack.confi.js中配置

const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

配置以后webpack在打包时就能够识别以.vue结尾的文件并进行打包了，vue文件内部的格式为

<template>
  <div class="example">{{ msg }}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>
<style>
.example {
  color: red;
}
</style>

经过此种方式，之后编写vue文件时就会更加的方便了，每一个组件对应一个单独的文件

live server

每次编写完代码后都要从新刷新页面，这种操做很浪费时间，webpack提供了一种实时刷新页面的功能
首先在js文件中配置

var path = require('path');
module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

当运行之后就能够经过本地的9000端口访问打包后的页面了，当页面代码改动后，服务器会自动从新加载

6.插件

和loader的区别

loader是用来处理某个特定的文件类型的，而插件是用来作更高级别的功能，它属于给全局添加功能，而不是只针对某一种文件类型经常使用有将打包后的js文件进行丑化的插件、添加版权信息的插件等等