webpack入门与笔记
为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法
- 模块化,让我们可以把复杂的程序细化为小的文件;
- 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
- Scss,less等CSS预处理器
什么是Webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
安装
Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample progect),在终端中转到该文件夹后执行下述指令就可以完成安装。
正式使用Webpack前的准备
- 在上述练习文件夹中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用
npm init
命令可以自动创建这个package.json文件npm init
输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。
package.json文件已经就绪,我们在本项目中安装Webpack作为依赖包
// 安装Webpack npm install --save-dev webpack
回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放准备给浏览器读取的数据(包括使用webpack生成的打包后的js文件以及一个index.html文件)。在这里还需要创建三个文件,index.html 文件放在public文件夹中,两个js文件(Greeter.js和main.js)放在app文件夹中,此时项目结构如下图所示
项目结构
index.html文件只有最基础的html代码,它唯一的目的就是加载打包后的js文件(bundle.js)
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="bundle.js"></script> </body> </html>
Greeter.js只包括一个用来返回包含问候信息的html元素的函数。
// Greeter.js
module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; };
main.js用来把Greeter模块返回的节点插入页面。
//main.js
var greeter = require('./Greeter.js'); document.getElementById('root').appendChild(greeter());
正式使用Webpack
webpack可以在终端中使用,其最基础的命令是
webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}
只需要指定一个入口文件,webpack将自动识别项目所依赖的其它文件,不过需要注意的是如果你的webpack没有进行全局安装,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址,继续上面的例子,在终端中属于如下命令
//webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js
转载于:https://www.cnblogs.com/asand/p/7147006.html
webpack入门与笔记相关推荐
- webpack入门学习笔记10 —— 在项目中使用图片资源
1. 写在前面 在前端项目中,图片是必不可少的一种资源.在使用图片的时候,我们可以有以下几种方式: 在 .html 文件中,通过 <img src="" alt=" ...
- webpack入门学习手记(一)
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
- webpack入门学习手记(一) 1
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
- webpack入门学习手记(三)
本人微信公众号:前端修炼之路,欢迎关注. 距离上一次更新这个系列,过去了两天.最近实在是有点忙,没有挤出时间整理.感觉日更还真是困难? 以下是正文. 管理资源 如果看过之前的系列文章,应该会有一个学习 ...
- webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
- 嵌入式Linux入门经典笔记
史上最牛的Linux内核学习方法论 点击下载 我的arm_linux移植笔记 点击下载 S3C2440完全开发流程 点击下载 Linux系统命令及其使用详解完整版 点击 ...
- dubbo入门学习笔记之入门demo(基于普通maven项目)
注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务 需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...
- Crypto++入门学习笔记(DES、AES、RSA、SHA-256)
Crypto++入门学习笔记(DES.AES.RSA.SHA-256) 背景(只是个人感想,技术上不对后面的内容构成知识性障碍,可以skip): 最近,基于某些原因和需要,笔者需要去了解一下Crypt ...
- WEBPACK 入门
webpack 入门 1. 什么是webpack 官网介绍:webpack是一个模块打包器.webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源.(webpack is a mod ...
最新文章
- 一文读懂序列建模(deeplearning.ai)之序列模型与注意力机制
- Oracle的逻辑结构(表空间、段、区间、块)——Oracle数据块(一)
- openoffice 安装后中文字符乱码问题
- 通话录音_iOS14,通话录音终于来了!
- linux ll 文件大小单位_该如何改善 Linux 系统性能?
- vue 多个api请求_Vue+Django REST framework实战3.RESTful API和VUE目录结构
- html中如何把选择文件的那个框放到右侧_如何关闭烦人的Mac通知?
- Win10+VS2015+CUDA9.0 环境搭建
- php文本框显示ip,php实现图形显示Ip地址的代码及注释_PHP教程
- Matlab字符串转换及数值格式转换
- topcoder srm 699 div1 -3
- IDEA 如果修改工作区的主题 也就是黑色背景和白色背景
- linux配置路由器命令手册,Linux配置路由器
- vb rs.recordCount=-1的解决办法
- 电脑开热点手机连不上
- RGB, YUV及相关标准
- OTU的定义与解读----了解笔记
- 操作系统实验三:主存空间的分配与回收
- element-plus icon图标的正确使用姿势
- Java语言基础大合集
热门文章
- 零起点学算法95——弓型矩阵
- Python学习之zip函数
- 页目录项和页表项——《x86汇编语言:从实模式到保护模式》读书笔记43
- springboot学习笔记(九)
- bluemix java_Bluemix 基础:将 SQL 数据库添加到您的 Java 应用程序中
- 初识Frida--Android逆向之Java层hook (二)
- 【译】KNOWLEDGE EXTRACTION FROM UNSTRUCTURED TEXTS
- Android通过Geth RPC接口实现接入以太坊私有链
- Android Studio 本机调试
- 广义平稳随机过程定义_广义平稳随机过程全解.ppt