文档章节

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

JavaSwing
 JavaSwing
发布于 2016/12/01 08:19
字数 2788
阅读 59
收藏 0
点赞 0
评论 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 ⋅ 0

前端工程化——构建工具选型

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

Bellhe ⋅ 01/08 ⋅ 0

webpack入门之简单例子跑起来

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

邹君安 ⋅ 2017/05/09 ⋅ 0

Web 使用webpack构建前端项目

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

Castie1 ⋅ 2017/09/23 ⋅ 0

【Webpack 构建技巧】你们尽管尝试,没提速算我输!

Web 应用日益复杂,相关开发技术也百花齐放,这对前端构建工具提出了更高的要求。Webpack 从众多构建工具中脱颖而出,成为目前最流行的构建工具,可以说是前端开发的必备工具之一。然而,很多...

IBMdW ⋅ 01/16 ⋅ 0

前端工具链

前段工具两个: npm webpack 一、npm 是一个js包管理工具,需要先安装nodejs,介绍 参考: http://www.npmjs.com.cn/ 使用:http://javascript.ruanyifeng.com/nodejs/npm.html 二、webpack...

爬墙 ⋅ 2016/05/13 ⋅ 0

如何打造一个令人愉悦的前端开发环境(一)

文章来源 最近几年,前端发展越来越迅速,各种萌新加入了前端这个大家庭,大有赶IOS、超Android的趋势呀!同时,萌新们提出了各种前端工作问题,除了最基础的html、css、js三板斧之外,最让人...

乖小鬼YQ ⋅ 2017/11/29 ⋅ 0

nodejs RSA 与 jsencrypt实现前端加密后端解密功能

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

悬河 ⋅ 06/13 ⋅ 0

ES6项目构建-1

基础架构 任务自动化gulp 1.什么是任务自动化 减少人工操作,让机器自动监听操作,自动响应。 2.什么是gulp 一个工具。解决自动构建的工具,增强工作流。 3.gulp的作用 完成工作流。利用它的...

yy不会笑 ⋅ 2017/12/18 ⋅ 0

下一代前端打包工具与tree-shaking

一、js模块化打包概述   随着js模块化规范AMD、CMD、commonJs的出现,模块打包工具也在不断的出现和演变,依次出现了r.js、browserify和webpack,过去的2015年就是webpack大行其道的一年,...

ouven ⋅ 2016/01/20 ⋅ 5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL 数据库设计总结

规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过1000字节...

OSC_cnhwTY ⋅ 58分钟前 ⋅ 0

多线程(四)

线程池和Exector框架 什么是线程池? 降低资源的消耗 提高响应速度,任务:T1创建线程时间,T2任务执行时间,T3线程销毁时间,线程池没有或者减少T1和T3 提高线程的可管理性。 线程池要做些什...

这很耳东先生 ⋅ 今天 ⋅ 0

使用SpringMVC的@Validated注解验证

1、SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 [java] view plain copy edit.userna...

瑟青豆 ⋅ 今天 ⋅ 0

19.压缩工具gzip bzip2 xz

6月22日任务 6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具 6.1 压缩打包介绍: linux中常见的一些压缩文件 .zip .gz .bz2 .xz .tar .gz .tar .bz2 .tar.xz 建立一些文...

王鑫linux ⋅ 今天 ⋅ 0

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 今天 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 今天 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 今天 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 今天 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 今天 ⋅ 0

Linux(CentOS)下配置php运行环境及nginx解析php

【part1:搭建php环境】 1.选在自己需要安装的安装包版本,wget命令下载到服务器响应目录 http://php.net/releases/ 2.解压安装包 tar zxf php-x.x.x 3.cd到解压目录执行如下操作 cd ../php-...

硅谷课堂 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部