首先新建一个项目文件夹 名字随便 避免掉关键字
在文件中打开控制台，确保路径是当前的文件夹
使用命令 npm init 创建一个package.json 包含各种信息，自己填写，默认也可以
注意点：webpack 4+以上的，都需要安装webpack-cli
安装 webpack-cli 后面我们需要使用webpack打包我们需要打包的文件
npm i webpack-cli -S 当前项目安装
npm i webpack-cli -g 全局安装
在项目中新建一个 webpack.config.js 用来存放配置代码
// 初始化版本 module.exports = { mode: 'development', // 当前的开发模式 entry: __dirname + "/js/test.js",// 入口文件 需要打包的js文件 output: { path: __dirname + "/dist",// 打包后的文件存放的地方 总的所有的打包文件的根文件 filename: "bundle.js" // 打包后输出文件的文件名，js文件打包后的路径 } }
提前写好运行的js文件，在当前的控制台，直接使用命令 webpack 打包
打包之后会新增加一个dist的文件夹
在html中引用当前打包之后的js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <!-- 引入打包之后的文件 --> <script src="./dist/bundle.js"></script> <!-- <script src="./js/test.js"></script> --> </html>
运行当前的html文件js内容就会被加载了
ps 文件目录
