WebPack工具运行原理及入门教程
WebPack是什么
- 一个打包工具
- 一个模块加载工具
- 各种资源都可以当成模块来处理
- 网站 http://webpack.github.io/
如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。
对于模块的组织，通常有如下几种方法：
- 通过书写在不同文件中，使用script标签进行加载
- CommonJS进行加载（NodeJS就使用这种方式）
- AMD进行加载（require.js使用这种方式）
- ES6模块
思考：为什么只有JS需要被模块化管理，前台的很多预编译内容，不需要管理吗？
基于以上的思考，WebPack项目有如下几个目标：
- 将依赖树拆分，保证按需加载
- 保证初始加载的速度
- 所有静态资源可以被模块化
- 可以整合第三方的库和模块
- 可以构造大系统
从下图可以比较清晰的看出WebPack的功能
这是一个示意图
WebPack的特点
- 丰富的插件，方便进行开发工作
- 大量的加载器，包括加载各种静态资源
- 代码分割，提供按需加载的能力
- 发布工具
WebPack的优势
- webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
- 能被模块化的不仅仅是 JS 了。
- 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
- 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。
WebPack的安装
安装命令
$ npm install webpack -g
使用webpack
$ npm init # 会自动生成一个package.json文件
$ npm install webpack --save-dev #将webpack增加到package.json文件中
可以使用不同的版本
$ npm install webpack@1.2.x --save-dev
如果想要安装开发工具
$ npm install webpack-dev-server --save-dev
WebPack的配置
每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
下面是一个例子
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件项
plugins: [commonsPlugin],
//页面入口文件配置
entry: {
index : './src/js/page/index.js'
},
//入口文件输出配置
output: {
path: 'dist/js/page',
filename: '[name].js'
},
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解决方案配置
resolve: {
root: 'E:/github/flux-example/src', //绝对路径
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。
entry 是页面入口文件配置，output 是对应输出项配置 （即入口文件最终要生成什么名字的文件、存放到哪里）
module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。 所有加载器需要使用npm来加载
最后是 resolve 配置，配置查找模块的路径和扩展名和别名（方便书写）
WebPack开始使用
这里有最基本的使用方法，给大家一个感性的认识
正确安装了WebPack，方法可以参考上面
书写entry.js文件
document.write("看看如何让它工作！");
书写index.html文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
执行命令，生成bundle.js文件
$ webpack ./entry.js bundle.js
在浏览器中打开index.html文件，可以正常显示出预期
增加一个content.js文件
module.exports = "现在的内容是来自于content.js文件！";
修改entry.js文件
document.write(require("./content.js"));
执行第四步的命令
进行加载器试验
增加style.css文件
body {
background: yellow;
}
修改entry.js文件
require("!style!css!./style.css");
document.write(require("./content.js"));
执行命令，安装加载器
$ npm install css-loader style-loader # 安装的时候不使用 -g
执行webpack命令，运行看效果
可以在命令行中使用loader
$ webpack ./entry.js bundle.js --module-bind "css=style!css"
使用配置文件
默认的配置文件为webpack.config.js
增加webpack.config.js文件
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
执行程序
$ webpack
发布服务器
安装服务器
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors
服务器可以自动生成和刷新，修改代码保存后自动更新画面
http://localhost:8080/webpack-dev-server/bundle
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue+node+webpack环境搭建教程
一.环境搭建 1.1.去官网安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack命令行语句为npm install webpack -g.测试安装成功的界面如下: 1.3.下面就是安装淘宝镜像,如下图
-
Vue+webpack项目基础配置教程
最近在学习webpack,跟着课程一个单页面应用,在这里记录一下.这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置. 记录比较粗略,后续会更新. 1.开发环境:vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目初始化 快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webp
-
Vue+webpack项目配置便于维护的目录结构教程详解
新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS
-
详解webpack运行Babel教程
摘要:Babel是转码器,webpack是打包工具,它们应该如何一起使用呢? GitHub仓库: Fundebug/webpack-babel-tutorial ES6 + IE10 = 语法错误! test.js使用了ES6的 箭头函数 : setTimeout(() => { console.log("Hello, Fundebug!"); }, 100) 由于低版本的浏览器没有支持ES6语法,这就意味着代码会出错.例如,在IE 10浏览器中,会出现"语法错误&qu
-
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
DLLPlugin 和 DLLReferencePlugin的使用 DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度. 1.首先build文件夹添加----webpack.dll.config.js: var path = require("path"); var webpack = require("webpack"); module.exports = { // 要打包的模块的数组 e
-
webpack4.0 入门实践教程
webpack 可以看做是模块打包机:他做的事情是,分析你的项目结构,找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言( Scss . TypeScript 等),将其打包为合适的格式以供浏览器使用 构建就是把源代码转换成发布到线上可执行的 JavaScript .CSS.HTML 代码,包括以下内容: 代码转换 : TypeScript 编译成 JavaScript . SCSS 编译成 CSS 等等 文件优化 :压缩 JavaScript .CSS.HTML 代码,
-
webpack教程之webpack.config.js配置文件
首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugin --save-dev 在项目app目录下建立component.js文件,写入如下代码 export default (text='hello world')=>{ const element=document.createElement('div'); element.innerHTML=te
-
webpack构建vue项目的详细教程（配置篇）
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入
-
WebPack工具运行原理及入门教程
WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack.github.io/ 如今,越来越多的JavaScript代码被使用在页面上,我们添加很多的内容在浏览器里.如何去很好的组织这些代码,成为了一个必须要解决的难题. 对于模块的组织,通常有如下几种方法: 通过书写在不同文件中,使用script标签进行加载 CommonJS进行加载(NodeJS就使用这种方式) AMD进行加载(require.js使用这种方式) ES6模块 思考:
-
mybatis原理概述入门教程
本文我将要介绍一下mybatis的框架原理,以及mybatis的入门程序,实现用户的增删改查,她有什么优缺点以及mybatis和hibernate之间存在着怎么样的关系,希望对小伙伴们有帮助,不足之处,还请多多指教. 什么是mybatis? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .2013年11月迁移到Github. MyBatis 是支持定
-
Python中一些自然语言工具的使用的入门教程
NLTK 是使用 Python 教学以及实践计算语言学的极好工具.此外,计算语言学与人工 智能.语言/专门语言识别.翻译以及语法检查等领域关系密切. NLTK 包括什么 NLTK 会被自然地看作是具有栈结构的一系列层,这些层构建于彼此基础之上.那些熟悉人工语言(比如 Python)的文法 和解析的读者来说,理解自然语言模型中类似的 -- 但更深奥的 -- 层不会有太大困难. 术语表 全集(Corpora):相关文本的集合.例如,莎士比亚的作品可能被统称为一个 文集(corpus): 而若干个作者
-
.NET读写Excel工具Spire.Xls使用入门教程(1)
在.NET平台,操作Excel文件是一个非常常用的需求,目前比较常规的方法有以下几种: 1.Office Com组件的方式:这个方式非常累人,微软的东西总是这么的复杂,使用起来可能非常不便,需要安装Excel,对于服务器,有时候还需要为配置IIS权限.折腾人,看到很多人在群里面使用这个东西,出现各种抓狂的错误: 这里特别感谢:PowerShell免费软件 的回复,用用powershell + excel 2007的方式,他很好的解决问题.其实我想说的是,Office既然提供了对com组件的支持,
-
react.js使用webpack搭配环境的入门教程
本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建,my-app为项目名称
-
BootStrap入门教程(三)之响应式原理
相关阅读: BootStrap入门教程(一)之可视化布局 BootStrap入门教程(二)之固定的内置样式 Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 工作原理 · 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding). · 使用行来创建列的水平组. · 内容应该放置在列内,且唯有列可以是行的直接子元素. · 预定义的网格类,比如 .
-
k3d入门指南之在Docker中运行K3s的详细教程
什么是k3d? k3d是一个小型程序,用于在Docker中运行K3s集群. K3s是经过CNCF认证的轻量级Kubernetes发行和沙箱项目.它是为资源有限环境设计的,被打包为单个二进制文件,所需RAM小于512MB. 要了解有关K3s的更多信息,请查看我们之前的公众号文章及B站上的视频. k3d借助从K3s仓库构建的Docker镜像在安装了Docker的任何机器上的Docker容器中启动多个K3s节点. 这样,一台物理(或虚拟)机(称为Docker Host)可以运行多个K3s集群,每个集群
-
网络抓包工具wireshark入门教程详解
Wireshark(前称Ethereal)是一个网络数据包分析软件.网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据. Wireshark使用WinPCAP作为接口,直接与网卡进行数据报文交换. 网络管理员使用Wireshark来检测网络问题,网络安全工程师使用Wireshark来检查资讯安全相关问题,开发者使用Wireshark来为新的通讯协定除错,普通使用者使用Wireshark来学习网络协定的相关知识. 当然,有的人也会"居心叵测"的用它来寻找一些
-
ZooKeeper入门教程三分布式锁实现及完整运行源码
目录 1.0版本 2.0版本 LockSample类 构造方法 获取锁实现 createLock() attemptLock() 释放锁实现 TicketSeller类 sell() sellTicketWithLock() 测试入口 测试方法 代码清单如下: 1.LockSample 2.TicketSeller ZooKeeper入门教程一简介与核心概念 ZooKeeper入门教程二在单机和集群环境下的安装搭建及使用 1.0版本 首先我们先介绍一个简单的zookeeper实现分布式锁的思路:
-
JSON Web Token(JWT)原理入门教程详解
目录 一.跨域认证的问题 二.JWT 的原理 三.JWT 的数据结构 3.1 Header 3.2 Payload 3.3 Signature 3.4 Base64URL 四.JWT 的使用方式 五.JWT 的几个特点 六.参考链接 一.跨域认证的问题 互联网服务离不开用户认证.一般流程是下面这样. 1.用户向服务器发送用户名和密码. 2.服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色.登录时间等等. 3.服务器向用户返回一个 session_id,写入用户的 Co