每天进步一点点---------WebPack简单使用

最新推荐文章于 2024-06-28 18:39:53 发布

攀登程序猿

最新推荐文章于 2024-06-28 18:39:53 发布

阅读量79

点赞数

分类专栏： Web前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45759288/article/details/116247432

版权

Web前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

`WebPack简单使用`

WebPack是Node管理的一个包，Node类似于Linux的Yum rpm包，安装后提供npm命令（类似于yum命令），通过npm install(yum install)可以安装各种软件。

WebPack可以用来为前台代码模块化打包，打包成浏览器可以识别的代码，比如js/less/css/jpg等都可以作为一个模块整合起来。

安装

（1）安装node，关注node的版本v12.18.3，node的安装路径

nodejs的安装目录中找到node_modules\npm.npmrc

		prefix=D:\software\JAVA\nodejs\node_modules\node_global
		cache=D:\software\JAVA\nodejs\node_modules\node_cache
		registry=https://registry.npm.taobao.org

（2）安装webPack

虽然说最好不要全局安装，但是全局安装步骤要简单好多，webPack.js会调用webpack-cli的路径，如果不全局安装需要单独配置后才能使用。

npm install webpack-cli -g

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dgFQ6RZP-1619628788944)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210429002515345.png)]

基本使用

a.案例准备

（1）提供commonJs的模块

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

function mul(num1, num2) {
    return num1 * num2;
}

module.exports = {
    add, mul,
}

（2）在main.js中使用

const {add, mul} = require("./utils/mathUtil.js")
console.log(add(10, 30));

（3）index.html仅引入main.js

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body>

      <script src="main.js"></script>
   </body>
</html>

此时刷新后，控制台报错

在这里插入图片描述

b.打包操作

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

在这里插入图片描述

index.html中引用打包后的js文件，此时刷新控制台，可以输出

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

在这里插入图片描述

攀登程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每天进步一点点---------WebPack简单使用

WebPack简单使用WebPack是Node管理的一个包，Node类似于Linux的Yum rpm包，安装后提供npm命令（类似于yum命令），通过npm install(yum install)可以安装各种软件。WebPack可以用来为前台代码模块化打包，打包成浏览器可以识别的代码，比如js/less/css/jpg等都可以作为一个模块整合起来。安装（1）安装node，关注node的版本v12.18.3，node的安装路径 nodejs的安装目录中找到node_modules\npm
复制链接

扫一扫