1.在网页中有哪些常见的静态资源?

  • Js:

    • .js .jsx .coffee .ts
  • Css:
    • .css .less .sass .scss
  • Images:
    • .jpg .png .gif .bmp .svg
  • 字体文件:
    • .svg .ttf .eot .woff .woff2
  • 模板文件:
    • .ejs .jade .vue

2.网页中引入的静态资源多了以后有什么问题?

  • 网页加载速度慢,因为我们要发起很多的二次请求
  • 要处理错综复杂的依赖关系,比如引入bootstrap得引入jquery

3.如何解决上述两个问题(为什么要使用webpack):

  • 合并、压缩、精灵图、图片的base64编码
  • 可以只用之前学过的requireJs、也可以使用webpack可以解决各个包之间的复杂依赖关系
  • 比如我们现在经常写一些.less的样式,但是你直接<link rel="stylesheet" src="./index.less">是无效的,因为浏览器并不能识别.less的文件。

4. 什么是webpack?

webpack是前端的一个项目构建工具,它是基于nodejs开发出来的一个前端工具。

5. 如何完美实现上述的两种解决方案?

  • 使用Gulp,是基于task任务的
  • 使用webpack,是基于整个项目进行构建的
  • 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

6.webpack的安装

  • 运行 npm install webpack -g全局安装webpack,这样就能全局使用webpack命令了。
  • 在项目根目录中运行npm install webpack --save-dev安装到项目依赖中

7.demo案例

需要全局引入webpack,在项目中npm install jquery --save安装jquery。

小案列的目录结构

index.html代码:

main.js代码:

打包结果:

如上操作,引入通过webpack打包后的bundle.js文件,不需要在引入main.js文件了,也可实现相同效果。

(1)为什么要使用webpack?的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. 技术周刊 · Lighthouse 测试报告生成

    登高远眺 天高地迥,觉宇宙之无穷 基础技术 Lighthouse 测试内幕 文章分享了网易云音乐前端性能监控平台使用 Lighthouse 的实践经验,介绍了 Lighthouse 的测试流程.内部模 ...

  2. RedHat服务器安装

    为什么选择 RedHat 市场占有率商业化比较高 厂商的支持比较丰富 新手建议ubuntu 进行上手 等熟悉了Linux环境可以选择自己喜欢的发行版 (有些Geeker就是认为Ubuntu太易于使用了 ...

  3. yum 安装Mysql8.0

    系统: CentOS 7(在CentOS 7中默认有安装MariaDB,这个是mysql的分支,一般来说还是使用自己安装的MySQL比较好) 1.下载并安装MySQL wget -i -c https ...

  4. hello python week one

    python的注释 好的pytho程序员不一定非要追求 代码的简短,代码的可读性也是至关重要的 与用户交互 输入 input 会将输入内容转化为字符串 输出 print 格式化输出 %d %s 占位符 ...

  5. 计算机网络之DNS协议

    DNS( Domain Name System)是“域名系统”的英文缩写,是一种组织成域层次结构的计算机和网络服务命名系统,它用于TCP/IP网络,它所提供的服务是用来将主机名和域名转换为IP地址的工 ...

  6. 入门大数据---Python基础

    前言 由于AI的发展,包括Python集成了很多计算库,所以淡入了人们的视野,成为一个极力追捧的语言. 首先概括下Python中文含义是蟒蛇,它是一个胶水语言和一个脚本语言,胶水的意思是能和多种语言集 ...

  7. linux查看当前目录下,各文件夹大小

    du -lh --max-depth=1

  8. 理解C#中的ValueTask

    原文:https://devblogs.microsoft.com/dotnet/understanding-the-whys-whats-and-whens-of-valuetask/ 作者:Ste ...

  9. postman不能启动的问题解决

    1.postman启动不了,启动时提示“postman resolving transporter buffer”,不能正常启动 第一步,删除:在chrome-更多工具-扩展程序里面删除了postma ...

  10. 如何在使用spring boot的时候,去掉使用tomcat

    在spring boot中引入spring-boot-starter-web依赖的时候,不想使用spring boot提供的tomcat怎么办呢? 如下配置则可以解决问题: <dependenc ...