webpack 打包js文件

最新推荐文章于 2024-04-04 11:51:18 发布

HanChen.log

最新推荐文章于 2024-04-04 11:51:18 发布

阅读量878

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： webpack

本文链接：https://blog.youkuaiyun.com/ACMER_2333/article/details/88377614

前端专栏收录该内容

8 篇文章

订阅专栏

本文解析了为何使用Webpack打包JS文件，通过实例展示了如何解决ES6语法在浏览器中的兼容性问题，详细介绍了局部与全局安装Webpack的过程，以及如何通过配置文件自动化打包流程。

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

首先为啥要用webpack打包js文件，举个例子

index.html如下：

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script src="./Main.js"></script>
</head>
<body>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</body>
</html>

Main.js如下：

import $ from 'jquery'
$(function(){
	$('li:odd').css('backgroundColor','blue');
})

正常来说，我运行index.html是可以看到偶数行是会变蓝色的，但是运行之后结果如下：

原因是在Main.js中import 引用jquery是ES6中的语法，在浏览器无法识别，所以样式是无法出来的。

所以我们可以通过webpack对Main.js打包成一个新的js文件，新的js文件是可以被浏览器识别的。

1，局部安装webpack：

进入到项目路径下，在终端运行： npm install --save-dev webpack

当然也可以选择全局安装： npm i webpack -g

2，通过终端命令行来打包js文件，

文件目录如下：

下面开始用webpack打包Main.js文件

终端命令：

node_modules/.bin/webpack ./src/Main.js -o ./dist/bundle.js（由于我是局部安装webpack的，所以在webpack前面要加上路径）

运行结果是在dist文件夹下新增了一个bundle.js文件。

然后我们在index,html中引用打包之后的js文件：

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script src="../dist/bundle.js"></script>
</head>
<body>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</body>
</html>

运行结果如下：

如果你是全局安装webpack的话，在终端输入 webpack ./src/Main.js -o ./dist/bundle.js 即可。

接下来有个问题就是如果我们频繁的改动Main.js文件中的内容，那么bundle.js的内容也要跟着变，我们可以继续用node_modules/.bin/webpack ./src/Main.js -o ./dist/bundle.js（局部安装）来更新bundle.js的值，如果每次输入这个字符串的话有点繁琐，我们可以新建一个webpack.config.js的文件，在文件中配置如下信息：



module.exports={
	entry: __dirname+'/src/Main.js',   //Main.js的路径
	output:{
		path: __dirname+'/dist',   //bundle.js的路径
		filename:'bundle.js'
	}
}

然后在终端中输入node_modules/.bin/webpack（局部安装webpack，如果全局安装webpack的话，直接输入webpack就可以了）即可。

有问题还请博主们指出。