首页 > Web开发 > 详细

webpack学习01--基本使用

时间:2021-02-15 23:42:22      阅读:37      评论:0      收藏:0      [点我收藏+]

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>

 

测试效果

技术分享图片

 

webpack学习01--基本使用

原文:https://www.cnblogs.com/asenyang/p/14403355.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!