webpack的安装与使用

最新推荐文章于 2025-04-20 21:36:14 发布

梦幻之光_dream

最新推荐文章于 2025-04-20 21:36:14 发布

阅读量1.3k

点赞数 1

分类专栏： Web前端开发文章标签： webpack javascript 前端 npm

本文链接：https://blog.youkuaiyun.com/William_fang/article/details/122489197

版权

Web前端开发专栏收录该内容

108 篇文章

订阅专栏

本文介绍了webpack的基础知识，包括其作为模块打包工具的角色，如何进行全局安装和版本查看，详细阐述了项目文件结构、配置文件的设置，以及如何打包和引入js文件。此外，还讲解了通过手动和命令方式实现内容监听的方法，帮助读者快速上手webpack的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.webpack概述

webpack是一个打包工具，基于node.js，可以将开发环境转成运行环境，可以快速地浏览代码与效果。

在webpack里，一切文件皆为模块。

webpack的功能：将多个js文件合并在一起，最后打包出浏览器可识别的js文件。它可以当做模块使用，用script引入到html文件中，便可通过浏览器打开，访问相应的内容。

参考webpack百度百科：
https://baike.baidu.com/item/webpack/23734030?fr=aladdin

二.webpack的安装

实验环境：node环境

编译器：HBuilder X

1.全局安装webpack、webpack-cli

npm install webpack webpack-cli -g

在这里插入图片描述

2.版本查看

webpack -v

在这里插入图片描述

三.项目文件

hello.js

// 把此文件当成模块来用
exports.sayHi =  function(){   //导出
	document.write("<div>Hello Webpack</div>");
}

main.js

//模块导入
var hello = require('./hello');    //用的是es6语法，后缀可以省略
hello.sayHi();

配置webpack.config.js文件

参考网址：

https://www.runoob.com/w3cnote/webpack-tutorial.html

module.exports = {
    entry: "./modules/main.js",   //入口文件
    output: {    //输出目录
        filename: "./js/bundle.js"    //合并打包成bundle模块
    },
	//watch:false   //用来监听内容的变化
};

四.webpack打包

webpack

在这里插入图片描述

打包成功之后，会出现下列的目录

在这里插入图片描述

总结

webpack打包流程：hello.js、main.js会合并成dist里的bundle.js

五.引入打包之后的js文件

在webpack下创建index.htm文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 引入打包后的js文件 -->
		<script src="dist/js/bundle.js">  
			
		</script>
	</body>
</html>