webpack打包：报错ERROR in ./src/index.jsModule not found: Error: Can‘t resolve

full_moon_

已于 2023-11-15 16:40:58 修改

阅读量2.2k

点赞数 7

分类专栏： Vue学习笔记文章标签： webpack javascript 前端

于 2023-11-15 15:54:57 首次发布

本文链接：https://blog.csdn.net/full_moon_/article/details/134421859

版权

3 篇文章 0 订阅

订阅专栏

在使用webpack前端模块化打包工具时，出现 Error: Can't resolve 'mathUtils.js'报错，我的问题是因为路径问题报错

在main.js中导入mathUtils.js路径：

const {add,mul} = require('mathUtils.js')

修改后：

const {add,mul} = require('./mathUtils.js')

1. 创建一个webpack目录：

创建dist文件夹：用于存放之后的打包文件和src目录；

创建src文件夹：用于存放我们写的源文件

main.js：项目的入口文件

mathUtils.js：定义了一些数学函数工具，可以在其他地方引用

index.html：浏览器打开展示的首页

2. mathUtils.js文件中的代码

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

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

module.exports = {
	add,
	mul
}

3. main.js文件中的代码

const {add,mul} = require('./mathUtils.js')
console.log(add(20,40));
console.log(mul(20,40));

4. 使用webpack将两个js打包

cd 对应的目录

在终端执行命令：webpack ./src/main.js ./dist/bundle.js

（webpack4需要加 npx webpack ./src/main.js ./dist/bundle.js）

5. dist目录下成功生成bundle.js

6. 在index.html中引用，运行index.html

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

1. 安装webpack首先需要安装Nodejs，Nodejs自带了软件包管理工具npm

查看自己的node版本:

node -v

2.全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本)

npm install webpack@3.6. -g

3.局部安装webpack(后续才需要)

--save-dev是开发时依赖，项目打包后不需要继续使用的

cd 对应目录
npm install webpack@3.6.0-save-det

4. 为什么全局安装后，还需要局部安装

在终端直接执行webpack命令，使用的全局安装的webpack

当在packagejson中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

关注