Web开发

首页 » 常识 » 诊断 » 利用Webpack打包最基础的js代码
TUhjnbcbe - 2023/6/2 22:01:00

在使用webpack进行最基础js代码打包前,首先确保本地已经安装和node.js,安装node.js后会自动安装npm包管理器,以下是本机环境的验证

本地磁盘目录下通过命令提示符进行npminit进行初始化,初始化后目录下会出现一个package.json文件

接下来我们通过安装webpack和webpack-cli

新建Webpack配置文件webpack.config.js文件,它是项目运行的入口文件

module.exports={//需要被打包的js文件路径及文件名entry:./src/index.js,output:{//打包输出的目标文件的绝对路径(其中__dirname为当前目录的绝对路径)path:__dirname+/dist,//打包输出的js文件名及相对于dist目录所在路径filename:index.js}};

在项目根目录下创建dist和src文件夹,并在src下创建一个名为index.js文件,并在里面通过document.write输出一段文本

通过npxwebpack进行打包输出到webpack.config.js中指定的输出目录

在dist文件夹下创建一个index.html文件,并引入index.js

!DOCTYPEhtmlhtmlheadlang="en"metacharset="UTF-8"titlewebpack打包最基础的js文件/title/headbodyscriptsrc="index.js"/script/body/html

通过VisualStudioCode打开该项目,然后运行index.html文件

1
查看完整版本: 利用Webpack打包最基础的js代码