1.使用npm下载webpack
使用npm init初始化package.json文件
npm init
下载webpack和webpack-cli
npm i webpack -D
npm i webpack-cli -D
2.测试webpack打包
webpack默认只能处理js/json资源，不能处理img/css资源(需要loader)
建立用于测试的data.json文件和index.js文件
data.json
{ "name":"zhangsan", "age":18 }
index.js
import data from "./data.json" console.log(data); function add(x,y){ return x + y; } console.log(add(1,2));
使用webpack-cli命令打包
//开发环境打包命令： //webpack ./src/index.js -o ./build/build.js --mode=development //生产环境打包命令： //webpack ./src/index.js -o ./build/build.js --mode=production
使用html文件引入打包好的js文件
<html> <head> <script type="text/javascript" src=‘./build.js‘></script> </head> <body> </body> </html>
测试效果