webpack的简单介绍

webpack是什么:

模块打包机,分析目录结构,找到js模块(包括浏览器不能直接识别的代码 typscript sass...),打包成合适
       的格式供浏览器访问
      模块打包 构建(项目)
打包的优势(webpack的优势)
    1 、模块化,拆分了业务复杂的js代码--》细小的文件
    2、 js拓展---》 基于原型面向对象---》基于class(typescript , es6)-->浏览器识别

webpack与gulp的区别:

1、webpack支持模块化,建有优化的流程。

2、webpack具有缓存机制。

webpack的安装

初始化项目:npm init---->会生成 package.json 这个文件。

在package.json这个文件中有下面的这个配置:

"scripts": { //自定义 执行命令 有些软件 命令太长
      "test": "echo \"Error: no test specified\" && exit 1"

},

安装webpack :npm install webpack --save-dev

打包 webpack的格式:webpack 要打包的文件名 打包后的文件名。

这里需要注意的是在命令行使用webpack这个命令,是需要在全局安装webpack的。但是官方建议的是在项目内安装webpack,如果你没用全局安装的话,你需要自己在配置文件中进行配置。

原文地址:https://www.cnblogs.com/hsgg/p/8251446.html

时间: 2024-10-12 10:27:42

webpack的简单介绍的相关文章

webpack 4 简单介绍

webpack是什么? webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler). 为什么要使用webpack呢? 随着web技术的发展,前端开发不再仅仅是静态网页的开发,前端代码的逻辑和交互越来越复杂. 回想一下最初我们如何开发一个页面,切图.写样式.用JQuery写一写JS效果,页面开发完就能直接在浏览器里查看.我们手动编译(比如用koala编译less),手动压缩(比如用compress压缩css),手动对比代码(比如用compare对比代码).

client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法

[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄)~* 天天饭局搞得我是身心疲惫= = 所以更新比較慢 今天想跟大家分享的就是这个大名鼎鼎的React框架 简单介绍 React是近两年非常流行的框架 流行到什么程度呢? 我看了一下Github上的数据 React达到了5w8+的star 在JavaScript中star排名第4 受欢迎程度可见一斑

Vue项目的建立和目录的简单介绍

一.介绍 Vue是前端三大框架之一,另外两个分别是react.angular.其设计模式是MVVM的设计架构模式. 二.安装 2.1 node.js安装 在安装vue之前的时候,需要安装node.js.去官网下载http://nodejs.cn/,然后将其添加到系统环境中,在使用如下的指令进行查询 # 查询指令 node -v 结果 2.2 配置镜像源 配置镜像源可以加快安装的速度,使用如下的指令进行添加,类似于Python中的pip配置. # 在npm中配置镜像源的命令 npm config

python的列表,元组和字典简单介绍

引 入 java                                   python 存取多个值:数组或list集合 ------------------------> 列表,元组 key-value格式:    Map        ------------------------>    字典 自己学习发现,java跟python这两门面向对象语言在数据类型的定义上,很多思想都是互通的,这里不说java,简单介绍一下python的列表,元组和字典. 一.列表 List: 最通

javascript的return语句简单介绍

javascript的return语句简单介绍:return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,有个清晰的把握是非常有必要的.下面就结合实例简单介绍一下return语句的作用.一.用来返回控制和函数结果:通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数.语法格式: return 表达式 代码实例如下: function add(){

Object-c集合的简单介绍

一.简单介绍 NSArray/NSMutableArray NSSet/NSMutableSet NSDictionary/NSMutableDictionary NSArray.NSSet.NSDictionary是不可变的,创建的时候初始化 NSMutableArray.NSMutableSet.NSMutableDictionary是可变的 二.使用介绍 NSArray是有序的数组 NSMutableArray *myArray=[[NSMutableArray alloc] init];

plsql的环境与介绍:环境的搭建和plsql的简单介绍

PLSQL编程 1.环境的搭建 (1)创建一个存储表空间 SQL> conn /as sysdbaConnected. SQL> create tablespace plsql datafile '/u01/oracle/oradata/ORCL/plsql01.dbf' size 1G; Tablespace created. (2)创建PLSQL用户SQL> create user plsql identified by plsql default tablespace plsql;

CSS之box-sizing的用处简单介绍

前几天才发现有 box-sizing 这么个样式属性,研究了一番感觉很有意思, 通过指定容器的盒子模型类型,达到不同的展示效果 例如:当一个容器宽度定义为 width:100%;  之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的 如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用, 特别是 input 和 textarea 等 现在设置 100% 再直

【玩转微信公众平台之七】 PHP语法简单介绍

经过多篇的努力,我们终于成为了微信公众平台的开发者.但是别高兴的太早,就跟修真小说一样:修炼多年武破虚空,飞升到仙界后本以为成为了天仙即可跳出三界外,不在五行中.可实际到了仙界才发现,成仙只是修行的第一步......没错,成为开发者也才只是第一步,因为现在你的微信公众平台还没有任何功能,说难听点就是小白,说好听点就是白马王子,说可爱点就是小白白,说黄色点就是洗白白,说...----------------要想在微信公众平台添加功能,那就需要写代码:既然说到写代码,那么肯定是要用php(如果用AS