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

接上一篇的内容继续来说，背景篇的内容主要是介绍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文件。项目结构如下图：

webpack-project-struct.png

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 {目录/要打包入口文件}  {目录/存放打包后文件命}

我执行的结果如下：

webpack-project-cmd-result.png

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

webpack-project-brower-result.png

至此，我们用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就可以达到和上面一行命令一样的效果了！

webpack-projdect-config.png

使用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说明文档就好）

例子

这里我使用两个开发中常用的loaders。css-loader和 style-loader，他们的作用分别是：css-loader可以让你使用 @import和 url(..)的方法实现 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结果如下：

webpack-css-loader-result.png

在webpack还有很多的其它loaders，作用也各不相同，比如：Babel(一个把es2015转换为现代浏览器能理解的对应js版本的loader)、还有css预处理loader Scss Loader、Less Loader、Stylus 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，结果如下：

webpack-plugins.png

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

结束语

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

欢迎交流，共同进步！

参考资料：

posted @ 2016-12-01 08:26  Java_Swing  阅读(5314)  评论(4)  编辑  收藏  举报