webpack打包安装(一)之环境的安装以及基本配置

本文链接：https://blog.csdn.net/wang_9909/article/details/120560108

本文引导读者通过创建简单项目，了解Webpack的基本用法，包括安装、配置、入口与输出文件的设定，以及如何利用webpack.config.js进行打包。重点介绍了模块导入导出和默认导出的概念，并展示了如何使用Webpack将src目录的代码打包到dist目录。

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

首先，我们新建一个文件夹，初始化项目

npm init -y

接下来，我们先安装webpack与webpack-cli包。

npm install webpack-cli webpack -D

我们先查看到webpack的版本号

webpack -v

然后，我们在该项目中创建一个src目录以及一些文件。具体目录如下：

在js目录下面的util.js中我们可以使用一个简单的函数导出。

const add = (x, y) => {
    return x + y
}
export default add

然后我们可以在src下面的index.js文件中导入这个模块

import add from './js/util.js'
console.log(add(1,2));

然后，我们在index.html中引入这个index.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="./src/index.js"></script>
</head>
<body>
    
</body>
</html>

使用Live Server插件运行这个html文件。可以看到src中的模块已经正常的导入并运行了。