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

最新推荐文章于 2024-05-11 23:44:44 发布

luffysk

最新推荐文章于 2024-05-11 23:44:44 发布

阅读量103

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/luffysk/article/details/118657443

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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端口访问打包后的页面了，当页面代码改动后，服务器会自动重新加载