1.使用npm下载webpack

使用npm init初始化package.json文件

npm init

下载webpack和webpack-cli

npm i webpack -g
npm i webpack-cli -g

查看webpack版本:

webpack -v

显示如下:

webpack 5.52.0
webpack-cli 4.8.0

 

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>

 

测试效果

 

posted on 2021-02-15 10:46  Sempron2800+  阅读(59)  评论(0编辑  收藏  举报