官方文档:https://webpack.js.org/concepts/

中文文档:https://doc.webpack-china.org/guides/installation/

简书简介:http://www.jianshu.com/p/42e11515c10f

什么是Webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用

预先安装node.js

正式安装:

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用之前:

1.定位当一个测试目录,开始项目:

npm init

建一个json文件

2.安装webpack作为依赖包

// 安装Webpack
npm install --save-dev webpack
3.回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html文件)。接下来我们再创建三个文件:
 

简要翻译:

了解webpack只需要了解这个四个步骤:

entry,

output,

loaders,

plugins

[html]webpack网页开发打包工具的更多相关文章

  1. Webpack与其他打包工具的区别

    webpack是一个模块化加载器兼打包工具,它同时支持AMD.CMD等加载规范.与其他模块化加载器相比,它有这些优势: 1.代码分割 webpack支持两种依赖加载:同步和异步.同步的依赖会在编译时直 ...

  2. 好用的打包工具webpack

    <什么是webpack> webpack是一个模块打包器,任何静态资源(js.css.图片等)都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们 ...

  3. Vue(基础七)_webpack打包工具用法(上)

    一.前言 1.webpack原理 二.主要内容 1.webpack原理: (1)官网图:我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个,因为这些js文件是相互依赖的,web ...

  4. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  5. webpack模块化管理和打包工具

    Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的 ...

  6. # webpack 打包工具(vue)

    vue-webpack 打包工具 我的github iSAM2016 不是教程,是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.pr ...

  7. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  8. webpack打包和gulp打包工具详细教程

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

  9. 项目前端打包工具从 NEJ 切换成 webpack

    此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这里不讨论 NEJ 和 webpack 的优劣,仅从技术角度来探寻一下能否实现,以及实现的代价. 前言 上一篇 ...

随机推荐

  1. java 字节流与字符流的区别详解

    字节流与字符流 先来看一下流的概念: 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入 ...

  2. kail linux nmap命令

    可用于: 检测活在网络上的主机(主机发现)检测主机上开放的端口(端口发现或枚举)检测到相应的端口(服务发现)的软件和版本检测操作系统,硬件地址,以及软件版本检测脆弱性的漏洞(Nmap的脚本) ---- ...

  3. redis和memcached相关

    应该选择哪一种缓存机制 redis相较于memcached更加年轻,功能更加强大. 对小型静态数据进行缓存处理,最具代表性的例子就是HTML代码片段.使用memcached所消耗内存更少. 其他情况下 ...

  4. python 字符串的I/O 操作

    想使用操作类文件对象的程序来操作文本或二进制字符串 使用io.StringIO() 和io.BytesIO() 类来创建类文件对象操作字符串数据 >>> s = io.StringI ...

  5. linux基础命令---mswap

    mkswap 在Linux设备或者文件中创建交换分区,创建完成之后必须使用swapon来使用它.一般在“/etc/fstab”中有一个交换分区列表,这样开机的时候就可以使用它. 此命令的适用范围:Re ...

  6. python3.4学习笔记(十六) windows下面安装easy_install和pip教程

    python3.4学习笔记(十六) windows下面安装easy_install和pip教程 easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的 首先安 ...

  7. 使用 jQuery 进行前端验证

    前段验证脚本的教程,其基础为jQuery的插件validate.    一.可以验证哪些信息 要求输入不能为空 要求输入格式必须为电子邮箱 要求输入格式必须为URL 要求输入格式必须为日期 要求输入格 ...

  8. P2512 [HAOI2008]糖果传递&&P3156 [CQOI2011]分金币&&P4016 负载平衡问题

    P2512 [HAOI2008]糖果传递 第一步,当然是把数据减去平均数,然后我们可以得出一串正负不等的数列 我们用sum数组存该数列的前缀和.注意sum[ n ]=0 假设为链,那么可以得出答案为a ...

  9. Python3.x:import urllib2报错解决方案

    Python:import urllib2报错解决方案 python2和3有些不一样: python2:输出为print 'hello world' python3:输出为print('hello w ...

  10. Delphi XE5 for Android (一)

    Delphi XE5 出来了,支持Android的开发,试用了一下,有几个问题: 1.只支持ARM7的设备,不支持Inter设备.手上刚好有一个华硕K004,很遗憾用不上,只能用手机试了. 2.要支持 ...