文档章节

前端工具之WebPack解密--使用

JavaSwing
 JavaSwing
发布于 2016/12/01 08:19
字数 2788
阅读 86
收藏 0

接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用!

注意:目前webpack分为两个版本:1.x 和2.x这两个版的对应配置方式也是不一样的,我目前只使用过1.X的版本。下面例子中所有配置的都是1.x的

这里先上一张webpack官方的图

webpack

官方对于webpack的解释:webpack is a module bundler(webpack就是一个模块打包机)。它就是分析你当前项目的结构把项目中用的浏览器不能理解的东西(SCSS , jade, Typescript等),按照合适的方式打包并把它翻译成浏览器可以理解的 css和js。在webpack中一切都是模块(图片、CSS也是)。

安装

注意: 这里使用的环境为windows下!

webpack是依赖于Node.js的,这就是说,再安装webpack之前,你的电脑上要先安装Node.js(且版本不能低于0.6以上),我们去官网上下载一个,一路next即可!

安装好之后我们在CMD中输入 node -v,来检查一下当前的版本以及是否安装成功:

C:\Users\zhang>node -v
v7.2.0

接下来,还要说一个东西就是npm(Node package manager)即Node的包管理工具。相当于VS中的Nuget(java中的maven),就是个管理当前项目依赖的东西。在很久以前node和npm是分开,要单独安装。现在的node.js已经把npm内置在程序里了!另外,如果完全没有使用过npm的同学建议去看下这个文章(也就5分钟的事),了解下常用命令,因为下面会用到。

在CMD中输入 npm -v:

C:\Users\zhang>npm -v
3.10.9

对于中国网络特殊情况,有些时候我们使用npm安装依赖包的时候,可能会比较慢,或者直接下载不了的情况。这个时候你可能需要个梯子,如果没有梯子也不要紧。可以使用淘宝的NPM镜像,有以上两种情况建议去看下官网的使用说明。(也是几分钟的事情)。如果你安装了cnpm命令,下面的操作中所有的npm命令都可以使用cnpm代替

做了这么多的准备工作,终于能安心的安装webpack了。有以下的两种方式:

# 全局安装
npm install -g webpack
# 安装webpack到你当前的项目(仅当前项目能使用)
npm install --save-dev webpack

我这里直接使用了全局安装

使用

官方的教程是:一步步的的操作一个项目文件(没有说整体的项目构成),来教我们一步步的使用。我看完后感觉有点乱乱,整体没有什么结构感觉,很零散!所以我这里使用一个项目方式来使用感觉更为明确点。

使用npm init构建一个项目

npm init

输入此命令后,在CMD窗体中会询问你一些问题:当前项目的名称、版本、描述、入口文件等等。不用担心我们一路回车就好。

我这里的显示如下:

D:\webpack\webpack-demo>npm init
.....
name: (webpack-demo)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\webpack\webpack-demo\package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
Is this ok? (yes)

D:\webpack\webpack-demo>

执行完上面的命令之后进行我们的项目目录,会发现多了一个package.json文件。里面显示的内容就是上面询问我们的那此问题,是一个javascript对象的方式存储。

package.json是对整个项目的描述,以及整个项目所依赖的包等信息。(类似于maven(java)中的pom.xml文件),让我们更方便的管理项目。

我们在当前的目录新建一个src文件夹,之后在src里面新建entry.js和str.js两个文件,在与package.json同级目录下新建一个index.html文件。项目结构如下图:

project

index.html文件只包含最基础的html代码,它的作用就是加载webpack打包之后的js文件。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>webpack</title>
</head>
<body>
	<div id="app"></div>
	<script src="bundle.js"></script>
</body>
</html>

str.js包含一个字符串变量。

var words = '你好,webpack';
module.exports = words;

entry.js 引用了str.js中的变量,并把值插入到页面中。

words = require('./str.js');
document.getElementById("app").textContent = words;

使用webpack命令进行打包

命令格式如下(注:全局安装下):

webpack {目录/要打包入口文件}  {目录/存放打包后文件命}

我执行的结果如下:

result

然后用浏览器打开index.html,结果如下:

resultb

至此,我们用webpack成功的打包了一个文件,完成了一个hellword的程序。但是,我们思考下,如果每次运行程序都在CMD输入这么多的命令,非常的繁琐,有没有什么比较简单的办法呢?答案是肯定有的,使用配置文件的方式。

使用配置文件来实现webpack的打包

官方是这样说的:随着项目的发展你的项目配置会越来越复杂,使用命令操作的方式会越发笨重,所以我们需要一个配置文件来代替!

在项目的根目录下创建一个webpack.config.js文件,内容如下:

module.exports = {
	entry : './src/entry.js',
	output : {
		path: __dirname,
		filename: 'bundle.js'
	}
}

说明: webpack.config.js是一个符合CommonJS规范的模块。另外上文中的__driname是node.js中的一个全局变量,代表当前执行脚本的根路径。

现在我们只需要在CMD中输入webpack就可以达到和上面一行命令一样的效果了!

images

使用webpack中的Loaders

webpack本身仅仅支持JavaScript模块,如果要使用其它的语言,比如:es2016、TypeScript、CoffeeScript等等,那么就需要使用loaders

Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。

loaders可以说是webpack中最让人兴奋的地方,仅仅需要简单的配置就可以通过webpack把它转换为现代浏览器能理解的JavaScript文件。

CSS

接着上面的例子继续。在前端开发中CSS必定是不可缺少的,为我们的页面穿上美丽的外衣。那么使用webpack进行开发该怎么使用呢?

先介绍一下关于Loaders的配置和安装方式

安装Loaders

在webpack中绝大多数的loaders都是以xxx-loader的方式命名,使用npm来安装它们:

# 这种安装方式是指在生产环境中也使用此Loader
npm install xxx-loader --save

或者

# 这种方式仅仅在开发时,使用的loader
npm install xxx-loader --save-dev

安装完成之后还要在webpack.config.js中进行配置才能使用,直接上代码:

module.exports = {
	entry : './src/entry.js',
	output : {
		path: __dirname,
		filename: 'bundle.js'
	},
	module: {
		loaders: [
			{
				test: /\.css$/,
				loader: 'style-loader!css-loader'
			}
		]
	}
}

在webpack中使用module关键字进行配置,其中loaders对应的是数组(loaders不止一个)。

  • test : 是一个正则表达式用来匹配要处理的文件类型(必要)
  • loader: loader对应的名称(必要)
  • include/exclude: 手动添加必须处理文件(文件夹)或者屏蔽一些文件(文件夹)(可选)
  • query: 为loader提供额外的设置选项(可选,查看对应loader对应的loader说明文档就好)
例子

这里我使用两个开发中常用的loaderscss-loaderstyle-loader,他们的作用分别是:css-loader可以让你使用 @importurl(..)的方法实现 require()的功能。而style-loader可以所有打包后的样式添加到页面中二者组合在一起正好能实现把CSS打包到js脚本中的功能。

安装

npm install css-loader style-loader --save-dev

执行完上面的命令之后在当前项目目录下会多出一个node_modules的文件夹,是用来存放当前项目所需的依赖。在package.json中会多出devDependencies这个对象,是说明当前项目安装的依赖。

配置

module.exports = {
	entry : './src/entry.js',
	output : {
		path: __dirname,
		filename: 'bundle.js'
	},
	module: {
		loaders: [
			{
				test: /\.css$/,
				loader: 'style-loader!css-loader'
			}
		]
	}
}

在src文件夹下新建一个base.css文件,输入以下内容。

* {margin:0; padding: 0;}
body {
   font-family:"Microsoft YaHei", "WenQuanYi Micro Hei";
   font-size: 14px;
   line-height: 20px;
}
#app {
   margin: 30px auto;
   width: 150px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   color: white;
   text-shadow: 0 1px 0 #de533a;
   background: #F49484;
}

在entry.js文件中进行修改,引入base.css

words = require('./str.js');
require('./base.css')
document.getElementById("app").textContent = words;

在CMD中执行webpack命令重新打包,之后再打开index.html结果如下:

image

在webpack还有很多的其它loaders,作用也各不相同,比如:Babel(一个把es2015转换为现代浏览器能理解的对应js版本的loader)、还有css预处理loader Scss LoaderLess LoaderStylus Loader等,这里送官方的loaders List,供大家找到适合自己项目的Loader。

插件(Plugins)

插件可以完成更多Loader不能完成的功能。主要是用来拓展WebPack的功能,主要在整个项目的构建过程中生效,执行相关的任务。

Loaders和Plugins是两个完全不同的东西,Loaders主要是用来处理各种各样的源文件(scss,less,jsx,jade) 一次处理一个,而Plugins并直接操作单个文件,但它对于整个项目的构建过程起作用。

同样webpack的插件也非常的多,送上目前webpack内置的插件列表

对于一个正式的项目开发完成之后,有以下的需求很正常:把打包后的Js文件进行压缩减少服务器的压力,还有在js文件中加上自己公司的版权声明。

使用方法

要使用其一个插件首页要使用npm进行安装,然后在webpack.config.js中进行配置。使用关键字plugins添加一个该插件的实例。

上面两个插件都是webpack内置的,所以我们直接配置即可

var webpack = require('webpack')
module.exports = {
	entry : './src/entry.js',
	output : {
		path: __dirname,
		filename: 'bundle.js'
	},
	module: {
		loaders: [
			{
				test: /\.css$/,
				loader: 'style-loader!css-loader'
			}
		]
	},
	plugins: [
   		 new webpack.BannerPlugin('This file is created by javaSwing'),
   		 new webpack.optimize.UglifyJsPlugin({
		    compress: {
		        warnings: false
		    }
		})
  	]
}

在CMD中运行webpack,结果如下:

image

我在运行的时候出现了一个情况就是虽然我使用的是全局安装的情况,但是如果不在项目内安装webpack依赖,程序会报错:Error: Cannot find module 'webpack'。解决的办法是在项目内再安装一次依赖 npm install webpack --save-dev

结束语

到此,webpack的初级使用已经结束了,如果您能耐心看到这里,我想您应该明白了webpack的一些基本的使用。我也是半个多月前接触到这个东西,写下来一些自己对这个东西的理解,能帮助大家入门最好,更为细致的使用,仍需要大家的探索!

欢迎交流,共同进步!

参考资料:

© 著作权归作者所有

共有 人打赏支持
JavaSwing
粉丝 21
博文 44
码字总数 8095
作品 0
杭州
程序员
私信 提问
前端工具之WebPack解密--背景

请注意,这是一篇站在完全新手的角度上来写的文章。可能你是一个后端人员想了解前端工具的使用和概念;也可能你是一个前端小菜(还在DIV+CSS的世界里挣扎着)。本文比较适合那些以前完全没有接...

JavaSwing
2016/11/29
428
0
nodejs RSA 与 jsencrypt实现前端加密后端解密功能

最近几天在给自己做的app添加一个加密解密功能,看了一些文章,最终决定使用RSA算法来做。还是在一些问题上困扰了几天,终于搞来搞去还是搞出来了。 一、模块选用 node-rsa模块:后端用的nod...

悬河
06/13
0
0
Web 使用webpack构建前端项目

好久没写技术博客了, 原因在于最近在学习前端方面的技术, 熟悉我的同学都知道, 之前我有使用Vue搭建了一个个人简历, 体验了一把最新的前端技术, 但之前我们使用的是vue-cli脚手架工具, 对于如...

Castie1
2017/09/23
0
0
webpack入门之简单例子跑起来

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

邹君安
2017/05/09
0
0
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用any-loader封装jQuery的XHR —— 随便写着玩系列

哎,都说没人用JQuery啦,叫你别写这个。 其实我也是好高骛远使用过npm上某个和某个很出名的XHR库,嗯,认识我的人都知道我喜欢喷JQ,以前天天喷,见面第一句,你还用JQ,赶紧丢了吧。但我也...

曾建凯
今天
4
0
聊聊storm的AggregateProcessor的execute及finishBatch方法

序 本文主要研究一下storm的AggregateProcessor的execute及finishBatch方法 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout......

go4it
今天
3
0
大数据教程(7.5)hadoop中内置rpc框架的使用教程

博主上一篇博客分享了hadoop客户端java API的使用,本章节带领小伙伴们一起来体验下hadoop的内置rpc框架。首先,由于hadoop的内置rpc框架的设计目的是为了内部的组件提供rpc访问的功能,并不...

em_aaron
今天
5
0
CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
3
0
利用ibeetl 实现selectpicker 的三级联动

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台 2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要 $("#...

donald121
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部