什么是 webpack?
代码拆分
Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。
Loader
Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。
智能解析
Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./templates/" + name + ".jade")。
插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。
快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。

总结下来其主要的优势:

  1. 1.按需加载模块,按需进行懒加载,在实际用到某些模块的时候再增量更新
  2. 2.webpack 是以 commonJS 的形式来书写脚本,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
  3. 3.能被模块化的不仅仅是 JS 了,能处理各种类型的资源。
  4. 4.开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
  5. 5.扩展性强,插件机制完善

安装
首先要安装 Node.js, Node.js 自带了软件包管理器 npm
用npm 安装webpack

# npm install webpack -g                   全局安装

此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 查看相关指令

通常我们会将webpack安装到项目依赖,这样就可以使用本地版本的webpack

常用命令

npm init      这个指令会引导你创建一个package.json,包括版本作者等信息,有助于你发包。后面安装的包的依赖关系也会在package.json里有体现。
npm install     直接执行这个命令,会按照当前目录下的package.json的配置去安装各个依赖的包。
npm install [module]    在当前目录安装这个模块。会去检测该模块是否存在于node_module文件夹中,存在了就不安装了。
npm install [module] -g    在全局进行模块安装。全局模式下安装的包,会自动注册到系统变量 path里的。
npm install [module] --save-dev    在当前目录下安装这个模块,但是仅在开发时使用。在package的"devDependencies"下,表示仅在开发的时候使用。

//进入项目目录
//确定已有package.json,没有就npm init 创建

# npm install webpack --save-dev,安装到你的项目目录

#npm run webpack (运行项目是将webpack命令写入到package.json的scripts标签中去了,原理都是使用webpack命令进行打包。)

如果要使用webpack开发工具,要单独安装 webpack-dev-server服务器,没有开发工具就不用执行下面的命令了。

# npm install webpack-dev-server --save-dev

可以使用
#webpack-dev-server
启动
webpack构建命令
webpack的常用参数
$ webpack --config webpack.min.js //另一份配置文件
$ webpack --display-error-details //显示异常信息
$ webpack --watch   //监听变动并自动打包
$ webpack -p    //压缩混淆脚本,这个非常非常重要!
$ webpack -d    //生成map映射文件,告知哪些模块被最终打包到哪里了
随着项目的增长,编译过程可能会越来越长,所以我们可以展示一些进度条以及增加配色来实现更友好地输出。我们可以通过以下命令达到目的:
$ webpack --progress --colors
启动服务器

$ webpack-dev-server --progress --colors

参考http://www.cnblogs.com/zhengjialux/p/6376501.html?utm_source=itdadao&utm_medium=referral

centos7搭建webpack相关推荐

  1. CentOS7搭建Git服务器

    CentOS7搭建Git服务器 文章目录 CentOS7搭建Git服务器 前言 搭建步骤 参考链接 前言 现有一台操作系统为CentOS 7的服务器,要将其作为代码库服务器使用,要求使用Git进行代码 ...

  2. linux下本地的源的格式,[Linux]CentOS7搭建/配置:YUM仓库/源[本地源/HTTP源/自建源仓库...

    [Linux]CentOS7搭建/配置:YUM仓库/源[本地源/HTTP源/自建源仓库 1 本地YUM源 1.1 [YUM仓库/服务端] 获取:软件包资源 1.2 [YUM仓库/服务端] 挂载/搭建: ...

  3. 搭建webpack基础配置

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

  4. linux安装mysql5.7.29_linux 之centos7搭建mysql5.7.29的详细过程

    1.下载mysql 1.1下载地址 https://downloads.mysql.com/archives/community/ 1.2版本选择 2.管理组及目录权限 2.1解压mysql tar ...

  5. 阿里云apache配置php mysql_阿里云CentOS7搭建Apache+PHP+MySQL环境

    最近要搭建一个阿里云的LMAP环境,选了CentOS7来做搭建. 1.Apache Centos7默认已经安装httpd服务,只是没有启动. 如果你需要全新安装,可以yum install -y ht ...

  6. 【运维开发】Mac OS(10.13.6)使用 vagrant+VirtualBox +centos7搭建k8s集群

    Mac OS(10.13.6)使用 vagrant+VirtualBox +centos7搭建k8s集群步骤 环境准备工作 下载VirtualBox 地址:https://www.virtualbox ...

  7. Centos7 搭建LNMP架构服务器实战

    Centos7 搭建LNMP架构服务器实战 前言 需求分析 拓朴设计及各服务器地址规划 配置部分 后端服务器实现 Web-1 nginx整合 Web-2 nginx整合 后端服务器测试 高可用Web集 ...

  8. 华为云Centos7搭建hadoop集群二:yum源替换,ssh免密处理,hadoop用户sudo

    华为云Centos7搭建hadoop集群二:yum源替换,ssh免密处理,hadoop用户sudo 新建hadoop用户并设置密码,密码不要设置为简单的123456等,我这里已经创建过了hadoop用 ...

  9. VMware+CentOS7搭建私有云桌面服务

    VMware+CentOS7搭建私有云桌面服务 1. 安装VMware虚拟机工作台 官网下载安装包 版本:14.1.3 Pro 地址:https://my.vmware.com/en/web/vmwa ...

  10. CentOS7搭建私有化Docker仓库Harbor

    CentOS7搭建私有化Docker仓库Harbor CentOS7搭建私有化Docker仓库Harbor Docker仓库Harbor下载 配置要求 硬件配置要求 软件配置要求 端口要求 安装依赖软 ...

最新文章

  1. 如何使用:before和:after伪元素?
  2. iptables做路由转发服务器经典案例
  3. python达梦数据库_python 操作达 梦数据库
  4. [转载] Java之继承
  5. make *** 没有指明目标并且找不到 makefile。 停止。_Makefile目标文件搜索(VPATH和vpath)...
  6. 一篇 CPU 占用高,导致请求超时的故障排查
  7. 复制过去格式不一样_疫情过去后,打卡不一样的过山车
  8. tampermonkey(油猴)跨域发送请求
  9. 提示非标准语法;请使用 ““ 来创建指向成员的指针
  10. 消防报警图形显示装置linux,消防中控-消防控制室图形显示装置状态识别及操作...
  11. visio设置图片默认大小_教大家Visio怎么随意调节图形的大小
  12. 【后端学习】后端技术要点总结【一】
  13. C语言实现汉诺塔问题(保姆式讲解)
  14. 中望3D Overdrive内核技术之“容差建模”
  15. 数字图像处理知识点梳理——第十章 图像分割
  16. 神舟电脑为什么这么便宜
  17. 应急管理场景中的手机信令数据应用探索
  18. openAI spinning up 学习之旅
  19. Java进阶导图xmind版本
  20. 中断发生如何执行到中断服务程序

热门文章

  1. 是怎么回事?沉浸式体验反倒是局限虚拟现实
  2. 金融行业市场策划案例(共12份)
  3. 个人笔记-如何学习(上)
  4. C语言printf输出十六进制16进制
  5. h5底部输入框被键盘遮挡_搜遍整个谷歌, 只有我是在认真解决安卓端hybrid app键盘遮挡输入框的问题...
  6. 企业转型遇到这些难题,就可以考虑一款APS生产计划排产软件了
  7. Fatal signal 11 (SIGSEGV) at 0x00000004 (code=1), thread 261 (servicemanager)错误
  8. vc6 file-open后错误(“0x73d311c7” 指令引用的“0x00000004”内存。该内存不能为”read”)
  9. halcon测试篇:求两条线之间的交点
  10. Python 爬虫模拟器