什么是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. 【codeforces 723F】st-Spanning Tree

    [题目链接]:http://codeforces.com/contest/723/problem/F [题意] 给你一张图; 让你选择n-1条边; 使得这张图成为一颗树(生成树); 同时s的度数不超过 ...

  2. Android使用C代码

    Android调用C代码 1.开发工具:Android studio 2.0 2.开发前准备: 2. 3. 4.下面我们就来开发我们的程序吧, [1]创建一个java类 package com.adm ...

  3. Mark一下:成为CSDN博客专家

    距第一篇博客(发表于2015.08.13)已有差不多7个月,还记得当时受一个基友的启发,觉得要总结写作些什么,于是磕磕碰碰写出第一篇博客,坚持写作至今,穿梭于CSDN.简书.知乎和作业部落等门户网站, ...

  4. HDU3236 Gift Hunting

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

  5. js cookie 设置

    (function () { function getCookie(name) { var start = document.cookie.indexOf(name + "="); ...

  6. BA-Delta知识点

    问题: DSM-RTR的网络负载能力是怎样的?每条总线带32个模块吗?MS/TP总线上的模块需要拨地址码吗?最大可以承载多少个点? 答:理论值是30,最佳性能是21个,一般情况25-28个 linkn ...

  7. BA-siemens-symaro传感器简介

    1 传感器的原理 传感器.控制器.执行机构是构成控制系统 3 个要素,传感器的作 用一般用来测量工艺参数,提供给控制器或显示仪表,实现工艺过程的 监测或控制.传感器的类型是按测量参数不同分类的,主要分 ...

  8. 关联规则推荐及Apriori算法

    参考这篇文章: http://blog.csdn.net/rongyongfeikai2/article/details/40457827 这条关联规则的支持度:support = P(A并B) 这条 ...

  9. 沃通SSL精灵,让站点HTTPS永只是期

    告别HTTP明文"裸奔"时代 百度.阿里巴巴.必应等越来越多的互联网巨头相继启用全站HTTPS加密,保护用户数据和隐私安全.逐步告别HTTP明文"裸奔"时代. ...

  10. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第10章节--SP2013中OAuth概览 SP2013中的OAuth

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第10章节--SP2013中OAuth概览  SP2013中的OAuth         SP apps使用OAuth授权 ...