webpack的安装与使用

最新推荐文章于 2024-05-29 21:08:09 发布

凤舞天翼

最新推荐文章于 2024-05-29 21:08:09 发布

阅读量125

点赞数

文章标签： vue vue.js npm node.js

本文链接：https://blog.csdn.net/qq_44367924/article/details/107054470

版权

第七天

webpack的安装与使用

webpack的安装与使用

什么是webpack？

从本质上来讲, webpack是一个现代的JavaScript应用的静态模块打包工具。我的理解就是把一些文件翻译成浏览器可以识别的格式或者是把文件使用的各种模块化方案转成大部分浏览器可以识别的模块化方案。
在这里插入图片描述

webpack安装

安装webpack首先需要安装node.js，可以控制台运行node -v检查是否已经安装了node.js，未安装的可以参考我之前的文章“创新实训日志二”。
安装好node.js后，这里我们使用webpack3.6.0版本。

npm install webpack@3.6.0 -g

-g 代表全局安装。安装好之后同样的方法检查版本号。

webpack -v
3.6.0

webpack的使用

整个项目的结构见文章结尾，方便理解。
新建项目并创建两个目录src和dist，src表示源码，用于开发；dist表示发布，用于正式发布。
在src下面创建mathUtils.js，定义两个函数：

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

function com(num1,num2){
    return num2*num1
}
//common.js模块化 导出
module.exports = {
    add,
    com
}

然后在项目目录下新建main.js，导入函数并通过控制台打印：

//common模块化规范
const {add,com} = require('./mathUtils')

console.log('common模块化规范');
console.log(add(30, 20));
console.log(com(30, 20));

接着控制台打开到项目目录，运行：

webpack ./src/main.js ./dist/bundle.js

运行成功后会发现dist目录下多了个bundle.js文件,这就是经过webpack处理的可以被浏览器识别的文件。我们还需要把它引用。
然后在src下写一个index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--文件引入-->
<script src="./dist/bundle.js"></script>
</body>
</html>

然后用浏览器打开我们的index.html，可以看到函数成功运行：

在这里插入图片描述
为了显示webpack对各种模块化方式的转化，我们再使用ES6模块化方案，src下新建info.js：

//ES6模块化
export function sub(num1,num2){
    return num1-num2
};

main.js导入：

//common模块化规范
const {add,com} = require('./mathUtils')

console.log('common模块化规范');
console.log(add(30, 20));
console.log(com(30, 20));

//ES6模块化规范
import {sub} from "./info";

console.log('ES6模块化规范');
console.log(sub(30,20));

同样要运行webpack命令，然后浏览器打开index.html：
在这里插入图片描述

整个项目结构：

在这里插入图片描述

凤舞天翼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的安装与使用

第七天webpack的安装与使用什么是webpack？webpack安装webpack的使用webpack的安装与使用什么是webpack？从本质上来讲, webpack是一个现代的JavaScript应用的静态模块打包工具。我的理解就是把一些文件翻译成浏览器可以识别的格式或者是把文件使用的各种模块化方案转成大部分浏览器可以识别的模块化方案。webpack安装安装webpack首先需要安装node.js，可以控制台运行node -v检查是否已经安装了node.js，未安装的可以参考我之前的文章“
复制链接

扫一扫