什么是webpack? 作用有哪些?
 
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用
作用:
 1、模块化,让我们可以把复杂的程序细化为小的文件;
 
  2、类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可      以识别;
 
 3、Scss,less等CSS预处理器
 
 
webpack的基本使用
1、全局安装webpack   npm install webpack -g
2、查看版本号 : webpack -v
3、查看全局安装过哪些模块:npm list -g --depth 0
4、局部安装webpack : npm install webpack --save-dev
5、基础的打包方式 webpack 文件名 生成文件名
温馨提示:webpack4.0以上版本坑比较多,新手建议安装4.0以下版本
 
1、卸载默认: npm uninstall webpack
2、全局安装: npm install webpack@3.5.3 -g
3、局部安装: npm install webpack@3.5.3 --save-dev


1:webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
2:gulp,grunt
Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。
<使用webpack>
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
 
 
 
 
 
 
 
 
 
 
 
 
 

模块打包机--webpack--基础使用的更多相关文章

  1. 【webpack】---模块打包机webpack基础使用---【巷子】

    001.什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Ty ...

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

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

  3. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  4. nodejs+gulp+webpack基础知识

    nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  5. linux设备驱动归纳总结(二):模块的相关基础概念【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-59415.html linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10 ...

  6. webpack基础入门

    我相信,有不少的朋友对webpack都有或多或少的了解.网上也有了各种各样的文章,文章内作者也写出了不少自己对于webpack这个工具的理解.在我刚刚接触webpack的时候,老实说,网上大部分的文章 ...

  7. 可满足性模块理论(SMT)基础 - 01 - 自动机和斯皮尔伯格算术

    可满足性模块理论(SMT)基础 - 01 - 自动机和斯皮尔伯格算术 前言 如果,我们只给出一个数学问题的(比如一道数独题)约束条件,是否有程序可以自动求出一个解? 可满足性模理论(SMT - Sat ...

  8. 搭建webpack基础配置

    搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...

  9. webpack基础概念

    中文文档:https://webpack.docschina.org/concepts/ 一个现代 JavaScript 应用程序的静态模块打包器(static module bundler). 在 ...

随机推荐

  1. 2019-03-28 SQL Server select 1

    select 1 是比select *更有效率的写法 因为它不返回具体的数据记录,而是返回n行的1 select 1 from studentsselect class,count(1) as pax ...

  2. ElasticSearch 深度分页解决方案

    常见深度分页方式 from+size 另一种分页方式 scroll scroll + scan search_after 的方式 es 库 scroll search 的实现 常见深度分页方式 fro ...

  3. [Beginning SharePoint Designer 2010]探索SharePoint Designer

    本章概要: 1.SharePoint Designer是如何进入到微软的工具集中去的 2.SharePoint Designer的基本特性 3.如何创建SharePoint站点 4.如何打开一个已经存 ...

  4. Android4.0设置界面改动总结(二)

    今年1月份的时候.有和大家分享给予Android4.0+系统设置的改动:Android4.0设置界面改动总结 时隔半年.回头看看那个时候的改动.事实上是有非常多问题的,比方说: ①.圆角Item会影响 ...

  5. 4418: [Shoi2013]扇形面积并|二分答案|树状数组

    为何感觉SHOI的题好水. ..又是一道SB题 从左到右枚举每个区间,遇到一个扇形的左区间就+1.遇到右区间就-1,然后再树状数组上2分答案,还是不会码log的.. SHOI2013似乎另一道题发牌也 ...

  6. UML中的序列图(时序图)

    序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸. 横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线表示,当对象的过程处于激活状态时.生命 ...

  7. JAVA设计模式之【原型模式】

    1.案例一 学生复制 package Prototype; /** * Created by Jim on 2016/10/1. */ public class Student implements ...

  8. Hessian实例

    简述Hessian Hessian是一个由Caucho Technology开发的轻量级RPC框架,由于它使用二进制RPC协议,所以它更快.更简单,很适合于发送二进制数据(访问官网): 在进行基于He ...

  9. C#---爬虫抓取系列

    以前就尝试过研究了一些爬虫程序,也找过一些爬虫抓取软件,效果不是很好. 今天正好一个培训的网友给了我一个视频,正好研究下,收获颇丰.感谢那位哥们~ 1.首先讨论一下抓取一个页面 这里我写了模仿写了一个 ...

  10. canvas绘制三等分饼型图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...