跟我一起学习webpack(一)
2024-09-15 14:03:54
跟我一起打包我们的第一个应用
第一步安装webpack
接下来我们新建文件
//add-content.js
export default function(){
document.write('hello world!')
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>myfirstewebpackdemo</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
//index.js
import addContent from './add-content'
document.write('My first webpack app <br/>')
addContent()
项目整个目录结构如下
接下来我们打包这个项目
使用命令很长很难记
npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
我们会发现多出来dist文件夹
现在我们直接打开浏览器运行项目效果为
上面我们提到,打包的命令很难记很难记,现在我们可以使用npm script这个简化命令的方式去运行
我们修改package.json文件为
//package.json
{
"name": "firstwebpackdemo",
"version": "1.0.0",
"description": "webpack01",
"main": "index.js",
"scripts": {
"build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"
},
"keywords": [
"webpack"
],
"author": "jser_dimple",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}
scripts是npm提供的脚本命令功能,在这里我们可以直接使用由模块所添加的指令
修改add-content.js文件
//add-content.js
export default function(){
document.write('i\m using npm scripts!')
}
重新打包项目,现在我就不需要那么复杂的命令了,只需要使用npm run build即可
运行项目效果为
我们分析项目目录,会发现这样是非常不合理的,项目对应的文件应该有专门的文件夹管理的
一般工程目录是放在源码src文件夹中的,输出的资源放在/dist文件夹中的
我们将index.js和add-content.js移动到src/js文件夹目录下
这个报错
后面了解到webpack默认的源代码的默认文件是src/index.js。我们只需要将index.js和add-content.js移动到src文件夹下
我们还需要修改package.json文件为
{
"name": "firstwebpackdemo",
"version": "1.0.0",
"description": "webpack01",
"main": "index.js",
"scripts": {
"build": "webpack --output-filename=bundle.js --mode=development"
},
"keywords": [
"webpack"
],
"author": "jser_dimple",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}
现在我们运行npm run build命令是成功的
放下我的dmeo地址:https://github.com/JserJser/dailyPush/tree/master/dayly7/firstWebpackDemo
本文学习自:《webpack实战入门,进阶与调优》
最新文章
- linux KERNEL 问题
- Oracle 安装及其遇到的问题
- centos搭建SVN三部曲
- Windows 数据类型
- [leetcode]_Best Time to Buy and Sell Stock I &;&; II
- 通用权限管理系统接口文档V4.2 版本之消息接口介绍
- Symfony VarDumper Component
- 数组Api .map()的使用
- Matlab 数理统计
- 更新ORACLE数据时遇到锁死情况的处理
- HDU 1004 - Let the Balloon Rise(map 用法样例)
- gridview回顾
- 有什么很好的软件是用 Qt 编写的?
- vc 制作图片资源dll
- Android高级编程笔记(四)深入探讨Activity(转)
- JavaScript重载解读
- Keyboard Test Utility v1.0.1.0 电脑键盘测试软件绿色版
- 拉普拉斯矩阵(Laplace Matrix)与瑞利熵(Rayleigh quotient)
- python-插入排序
- 运营商级NAT(Carrier-grade NAT)
热门文章
- [JZOJ2679] 跨时代
- bzoj1433: [ZJOI2009]假期的宿舍 [二分图][二分图最大匹配]
- 「题解」:$Simple$
- 使用C++网络库libcurl
- bootstrap1总结
- selenium python bindings 初步用法及简单参考例子
- System.Web.Mvc.HttpOptionsAttribute.cs
- Python 实现快速排序和随机快速排序
- ubuntu常见错误–Could not get lock /var/lib/dpkg/lock解决
- idea git 下载项目,解决冲突,提交代码