标签:nbsp utf-8 全局 技术 导入导出 const doc ima 依赖项
npm init
npm init –yes
{
"name": "webpack-demo", //包名
"version": "1.0.0", //版本号 主版本.次版本.修订版本
"description": "", //项目描述
"main": "index.js", //模块入口文件
"scripts": { //脚本 可以使用 npm run test 来省略重复输入
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], //关键词
"author": "", //作者
"license": "ISC" //许可证
}
注:在Json文件中不能有注释,这里只是为了方便说明。
msg();
function msg() {
console.log("from dependency!");
}
<!DOCTYPE html>
<html lang="zh-cn">
<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>Document</title>
</head>
<body>
<script src="./src/dependency.js"></script>
<script src="./src/index.js"></script>
</body>
</html>
module.exports.func = function() {
console.log("from dependency!");
}
const o = require("./dependency")
o.func();
dependency.js
export default function () {
console.log("from dependency!");
}
index.js
import func from "./dependency"
func();
<!DOCTYPE html>
<html lang="zh-cn">
<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>Document</title>
</head>
<body>
<!-- <script src="./src/dependency.js"></script>
<script src="./src/index.js"></script> -->
<script src="./dist/main.js"></script>
</body>
</html>
可以发现请求数少了一次,看似总时间没有什么变化,那是因为当前请求的文件较少,体现不出WebPack打包生成然后引用一个文件的优势。需要注意的是,WebPack不只可以打包JS文件,还可以打包图片、CSS样式表。
标签:nbsp utf-8 全局 技术 导入导出 const doc ima 依赖项
原文地址:https://www.cnblogs.com/hkfyf/p/11681035.html