vue笔记之webpack的构建与使用
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue笔记之webpack的构建与使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2067字，纯文字阅读大概需要3分钟。
内容图文
文章目录
一、webpack是什么？
简单点来说，Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
打包完成之后，就可以在页面当中通过<scripts>引入这些资源就可以了，非常方便。
还有一点之后，打包完成之后，就相当于降级了，不会一直按照es6的规范，因为有些浏览器是不支持es6规范的，也正因为此浏览器就可以运行webpack打包的资源了。
二、使用步骤
1.创建项目
2.打开项目
- 使用idea打开刚才创建的项目，然后创建一个modules目录
- 在modules文件夹下面创建一个
hello.js
/*暴露一个方法给外界访问*/
exports.sayHi = function (){
document.write("<div>我是miracle</div>>")
};
- 在modules文件夹下面创建一个
main.js
/*
1. require用于导入一个模块，导入完成即可使用模块里面定义的方法
2. */
var hello = require("./hello");
hello.sayHi();
- 在项目目录下创建一个webpack的配置文件
webpack.config.js
module.exports = {
/*入口文件，webpack用哪个文件作为项目的入口*/
entry: "./modules/main.js",
/*输出，指定webpack把处理好的资源放在什么地方*/
output: {
/*当前目录下的/js/budle.js*/
filename: "./js/bundle.js"
}
/*
* 还有很多属性，比如
* 1.module模块，用于处理各种类型的文件
* 2.plugins插件，比如热更新，代码重用等
* 3.resolve，设置路径指向
* 4.watch,监听，用于设置文件改动之后，就打包，相当于热部署。
*
* */
}
- 终端打包运行
D:\WorkPlace\IdeaProjects\webpack_demo>webpack
3.使用bundle.js
创建一个html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--引入那个webpack打包之后的资源-->
<script src="dist/js/bundle.js">
</script>
</body>
</html>
总结
最后再把bundle.js的内容展示一下看看，其实有点复杂看不懂，但是自己写的方法还是可以发现的。只不过webpack帮我们做了一层封装，看起来很复杂。
(()=>{var r={645:(r,i)=>{i.sayHi=function(){document.write("<div>我是miracle</div>")}}},i={};(function t(e){var o=i[e];if(void 0!==o)return o.exports;var n=i[e]={exports:{}};return r[e](n,n.exports,t),n.exports})(645).sayHi()})();
看完恭喜你，又知道了一点点!
你知道的越多，不知道的越多！
感谢您的阅读，你的关注和评论，是对我学习的最大的支持，加油，陌生人，一起努力。
内容总结
以上是互联网集市为您收集整理的vue笔记之webpack的构建与使用全部内容，希望文章能够帮你解决vue笔记之webpack的构建与使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。