webpack学习01--基本使用

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) 编辑收藏举报