关于微信公众号:前端呼啦圈(Love-FED)我的博客:劳卜的博客知乎专栏:前端呼啦圈前言这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推出。首先什么是webpack?如果说它是一个打包工具那真的是有点大材小用了。我个人认为we ...
关于
- 微信公众号:前端呼啦圈(Love-FED)
- 我的博客:劳卜的博客
- 知乎专栏:前端呼啦圈
前言
这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推出。
首先什么是webpack?如果说它是一个打包工具那真的是有点大材小用了。我个人认为webpack是一个集前端自动化、模块化、组件化于一体的可拓展系统,你可以根据自己的需要来进行一系列的配置和安装,最终实现你需要的功能并进行打包输出。
本文作为一篇入门教程,这里先从webpack最简单的3招开始介绍,即拆分、打包、压缩。
步骤
1.传统项目中的问题
在不依赖任何自动化、模块化工具的项目中,通常我们的代码是这样的:
index.html
<html> <head> <title>传统项目</title> <script src='/images/loading.gif' data-original="https://code.jquery.com/jquery-2.2.4.js"></script> </head> <body> <script src='/images/loading.gif' data-original="app/index.js"></script> </body></html>
app/index.js
function main() { $('body').html('hello world!');}main();
以上示例中,脚本之间存在着隐式依赖关系。
index.js取决于被包括在页面运行之前的jQuery,它只是假设有一个全局变量$的存在。
这样管理JavaScript项目有一些问题:
如果依赖项丢失,或者包含在错误的顺序中,应用程序将不会运行。
原标题:webpack入门必知必会
关键词:web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。