在使用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文件