什么是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. Java基础学习总结(65)——Java中的String,StringBuilder和StringBuffer比较

    字符串,就是一系列字符的集合. Java里面提供了String,StringBuffer和StringBuilder三个类来封装字符串,其中StringBuilder类是到jdk 1.5才新增的.字符 ...

  2. RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第五篇【AppiumLibrary校验函数介绍】

    http://blog.csdn.net/deadgrape/article/details/50619050 以上连作者先跪一下方便面,在上一篇中,作者遗漏了两个常用的函数: 1.长按 Long P ...

  3. HDU3236 Gift Hunting

    /* HDU3236 Gift Hunting http://acm.hdu.edu.cn/showproblem.php?pid=3236 dp 滚动数组 * * */ #include <c ...

  4. GIT文件的4种状态

  5. 关于java发送email

    转载:https://blog.csdn.net/qq_32371887/article/details/72821291 1:使用JavaMail发送邮件 // 1.创建一个程序与邮件服务器会话对象 ...

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

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

  7. QT使用tableWidget显示双排列表 而且选中用红框圈出来

    如需转载请标明出处:http://blog.csdn.net/itas109 整个project下载地址:http://download.csdn.net/detail/itas109/7607735 ...

  8. unity3d教程运行物理机制

    首先,我们将把Hooke定律写Euler方法结合在一起找到新坐标.加速和速度. Hooke定律是F=kx,这里的F是指由水流产生的力(记住,我们将把水体表面模拟为水流),k是指水流的常量.x则是位移. ...

  9. 【Android 系统开发】使用 Source InSight 阅读 Android 源代码

    1. 安装 Source Insight (1) Source Insight 相关资源 安装相关资源 : -- 下载地址 : http://www.sourceinsight.com/down35. ...

  10. java.lang.NoClassDefFoundError: javax/wsdl/extensions/ElementExtensible

    转自:https://blog.csdn.net/zt13258579889/article/details/82688723 严重: Context initialization failed or ...