webpack打包构建简单的使用，附详细步骤和代码展示

最新推荐文章于 2025-07-01 23:58:52 发布

原创最新推荐文章于 2025-07-01 23:58:52 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文通过创建一个简单的webpack项目，介绍了如何新建文件、编写js代码、配置webpack.config.js以及使用html-webpack-plugin。在完成配置后，通过npx webpack命令进行打包，生成的dist目录包含a.js和app.html。app.html自动引入了打包后的脚本，并成功在浏览器中运行，展示了webpack的基本使用流程。

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

1.首先新建一个文件夹如，webpackStatr,然后在文件夹下新建一个src文件，再新建两个js文件helloWorld.js和index.js如下：

helloWorld.js:

//首先定义一个功能函数
function helloWord(){
    console.log("正在尝试：","Hello Word!!!!");
}

//然后将功能函数暴露出去
export default helloWord;

index.js:

//用过import，将helloWorld.js导入    .js后缀可以省略
import helloWord from "./helloWord"

//调用helloWorld.js中的helloWorld方法
helloWord()

2.在src同层级目录下新建一个webpack.config.js文件和一个html文件，我们的打包设置都会写进webpack.config.js这个文件：

webpackStatr.html：

<!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>webpackStatr</title>
</head>
<body>
</body>
</html>

webpack.config.js：

//引入nodejs的path模块，主要是帮助我们处理输出文件的路径
const path =  require("path")
/** 
 首先需要安装 安装命令 npm  install html-webpack-plugin
 然后引入用常量接受
 作用：可以将输出的文件以我们提供的html作为模板生成
*/
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry:"./src/index.js",//webapck打包的入口
    output:{//文件输出的出口
        filename:"a.js",//输出的文件的名字 可以起任意名字
        path:path.resolve(__dirname,"./dist"),//输出文件的路径，需要用path做处理
        clean:true,//是否清理之前打包生成的文件
    },
    mode:"none",//可选development或production或none,先选则none，以后再说具体该怎么使用

    plugins:[//插件
        //使用的时候必须要new  
        new HtmlWebpackPlugin({
            template:"./webpackStatr.html",//指定html文件生成的模板
            filename:"app.html",//指定生成htnl文件的名字
            inject:"body",//指定script标签生成的位置 head或body
        })
    ],
}

3.做完这些准备工作我们就可以开始使用webpack来进行打包了，在这里再给大家展示一下目录结构，方便大家对照：