Vue 教程(二十六)webpack 基本使用

最新推荐文章于 2023-05-23 18:14:53 发布

_否极泰来_

最新推荐文章于 2023-05-23 18:14:53 发布

阅读量103

点赞数

分类专栏： # Vue教程

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/yuan_xw/article/details/119512739

版权

Vue教程专栏收录该内容

49 篇文章 24 订阅

订阅专栏

Vue 教程(二十六)webpack 基本使用

vue 目标结构

在这里插入图片描述

string-utils.js 文件

在这里插入图片描述

math-utils.js 文件

在这里插入图片描述

main.js 文件

在这里插入图片描述

index.html 文件

在这里插入图片描述

打包命令：webpack src/main.js dist/bundle.js

vue 目标结构

dist：用于存放之后打包的文件
src：用于存放我们写的源文件
- main.js：项目的入口文件
- math-utils.js：定义了一些数学工具函数,可以在其他地方引用,并且使用
- string-utils.js：定义了一些字符串,可以在其他地方引用,并且使用
index.html：浏览器打开展示的首页.html
package.json：通过 npm init 生成的,npm 包管理的文件(暂时没有用上,后面才会用上）
string-utils.js 文件

const length = function (str) {
  if (str == null || str == undefined) {
    return 0;
  }
  return str.length;
};

const toUpperCase = function (str) {
  if (str == null || str == undefined) {
    return "";
  }
  return str.toUpperCase();
};

// ES6 语法导出
export { length, toUpperCase };

math-utils.js 文件

function add(num1, num2) {
  return num1 + num2;
}

function sub(num1, num2) {
  return num1 - num2;
}

// COMMON JS 导出
module.exports = {
  add,
  sub,
};

main.js 文件

// COMMON JS 导入
const { add, sub } = require("./math-utils.js");
console.log("add==>", add(10, 20));
console.log("sub==>", sub(30, 16));

// ES6 导入
import { length, toUpperCase } from "./string-utils";
console.log("length==>", length("hello world"));
console.log("toUpperCase==>", toUpperCase("hello world"));

index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack基础使用</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

打包命令

webpack src/main.js dist/bundle.js

在这里插入图片描述

浏览器显示

在这里插入图片描述

– 以上为《Vue 教程(二十六)webpack 基本使用》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

_否极泰来_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 教程(二十六)webpack 基本使用

Vue 教程(二十六)webpack 基本使用vue 目标结构string-utils.js 文件math-utils.js 文件main.js 文件index.html 文件打包命令：webpack src/main.js dist/bundle.jsvue 目标结构 dist：用于存放之后打包的文件 src：用于存放我们写的源文件main.js：项目的入口文件math-utils.js：定义了一些数学工具函数,可以在其他地方引用,并且使用string-util
复制链接

扫一扫