一、安装

安装Webpack之前需要安装nodejs，然后用npm安装:

$ npm install webpack -g

&nsbp;运行以上命令就将Webpack安装到了全局环境中。
  但是通常我们会将Webpack只安装到项目的依赖中:

$ cd /www/webpack_demo1      // 进入项目目录，确保该目录下存在有package.json文件,该文件之后会讲到

$ npm install webpack --save-dev  // 安装webpack依赖

二、使用

首先创建一个index.html和entry.js文件：

// index.html

<html>

<head>

  <meta charset="utf-8">

</head>

<body>

  <script src="bundle.js"></script>  // 注意这里是bundle.js不是entry.js

</body>

</html>
// entry.js

document.write('It works.')

然后编译 entry.js 并打包到 bundle.js：

$ webpack entry.js bundle.js

然后用浏览器打开会看到It works
  接下来添加一个模块module.js，并修改入口entry.js:

// module.js

module.exports = 'It works from module.js.'
// entry.js

document.write('It works.')

document.write(require('./module.js')) // 添加模块

然后重新打包 webpack entry.js bundle.js 刷新页面可以看到变化 It works.It works from module.js.
  Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

三、Loader

Webpack本身只能处理js模块，如果要加载css\img...等静态资源就需要使用Loader转换
  Loader可以理解为模块和资源的加载器，它本身是一个函数，接受源文件为参数然后转换并返回。这样我们就可以通过require加载任何类型的模块或文件。   Loader的特性:

  • 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
  • Loader 可以同步或异步执行。
  • Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
  • Loader 可以接受参数，以此来传递配置项给 loader。
  • Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
  • Loader 可以通过 npm 发布和安装。
  • 除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。
  • Loader 可以访问配置。
  • 插件可以让 loader 拥有更多特性。
  • Loader 可以分发出附加的任意文件。

惯例loader一般是xxx-loader格式，eg: css-loader。在引用loader的时候可以使用简写: json-loader可以写json。
  Loader可以在require()引用模块的时候添加，也可以在webpac全局配置中进行绑定，还可以通过命令行的方式使用。
  下面来说明下loader怎么用   我们在页面中引入一个style.css文件，首页将style.css看成一个模块，使用css-loader读取它，再用style-loader把它插入到页面

/* style.css */

body { background: blue; }

修改entry.js

require("!style-loader!css-loader!./style.css") // 载入 style.css

document.write('It works.')

document.write(require('./module.js'))

安装loader：

$ npm install css-loader style-loader // 我在这里安装的时候貌似报了个错，后边加-g指定全局安装就好了

重新编译打包可以看到页面背景颜色发生了变化
  如果每次require CSS文件的时候都要写loader前缀，很麻烦，我们可以根据模块类型(扩展名)来自动绑定需求的loader。
  将entry.js中的require("!style!css!./style.css") 修改为require("./style.css"),然后执行:

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

// 有些环境下可能需要使用双引号

$ webpack entry.js bundle.js --module-bing "css=style-loader!css-loader"

这两种方式效果是一样的。

四、配置文件

Webpack处理在命令行中指定参数还可以通过制定配置文件来执行。默认情况下会搜索当前目录的webpack.config.js文件，这个文件是一个node.js模块，返回一个json格式的配置信息对象，或通过 --config 选项来指定配置文件。

在项目中创建package.json（package.json是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件）来添加webpack需要的依赖:

{

  "name": "webpack-example",

  "version": "1.0.0",

  "description": "A simple webpack example.",

  "main": "bundle.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "webpack"

  ],

  "author": "orlion",

  "license": "MIT",

  "devDependencies": {

    "css-loader": "^0.21.0",

    "style-loader": "^0.13.0",

    "webpack": "^1.12.2"

  }

}

然后运行:

npm install

然后创建一个配置文件webpack.config.js：

var webpack = require('webpack')

module.exports = {

  entry: './entry.js',

  output: {

    path: __dirname,

    filename: 'bundle.js'

  },

  module: {

    loaders: [

      {test: /\.css$/, loader: 'style-loader!css-loader'}

    ]

  }

}

同时简化entry.js与style.css加载方式:

require('./style.css')

五、插件

插件可以完成loader不能完成的功能
  插件的使用一般是在webpack的配置信息plugins选项中指定。
  Webpack本身内置了一些常用的插件，下面我们利用BannerPlugin内置插件来演示一下。这个插件的作用是给输出的文件头部添加注释信息
  修改webpack.config.js，添加plugins:

var webpack = require('webpack')

module.exports = {

  entry: './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 zhaoda')

  ]

}

然后运行webpack，打开bundle.js。可以看到文件头部出现了我们指定的注释信息：

/*! This file is created by zhaoda */

/******/ (function(modules) { // webpackBootstrap

/******/  // The module cache

/******/  var installedModules = {};

...

Webpack前端打包工具的更多相关文章

  1. grunt,gulp,webpack前端打包工具的特性

    1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...

  2. webpack前端构建工具学习总结（一）之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  3. webpack前端构建工具学习总结（二）之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  4. webpack前端构建工具学习总结（四）之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  5. 项目前端打包工具从 NEJ 切换成 webpack

    此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这里不讨论 NEJ 和 webpack 的优劣,仅从技术角度来探寻一下能否实现,以及实现的代价. 前言 上一篇 ...

  6. 前端打包工具——build release介绍

    前言 对于前端开发者来说,资源打包是日常过程中一个必不可少的过程:目前我们大多数时候使用grunt.gulp.webpack这三个工具来完成这个工作:但是有一个特点就是我们没创建一个项目都要对应的去编 ...

  7. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

  8. 前端打包工具之fis3的初级使用

    说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单.于是乎,我转入了fis3阵营,发现fis3 ...

  9. 浅谈Webpack模块打包工具三

    Source Map 生产代码与开发代码完全不同,如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码, 须在打包之后的代码文件的末尾位置例如添加//# sour ...

随机推荐

  1. python之socket编程4

    1 socketserver实现并发 基于tcp的套接字,关键是两个循环,一个通信循环,一个链接循环 Socketserver的 模块中分成两类: Server类(解决连接问题) Request类(解 ...

  2. 2018年东北农业大学春季校赛 E-wyh的阶乘(求n!的0的个数)

    链接:https://www.nowcoder.com/acm/contest/93/E来源:牛客网 题目描述 这个问题很简单,就是问你n的阶乘末尾有几个0? 输入描述: 输入第一行一个整数T(1&l ...

  3. 更好用的excel国际化多语言导出

    不知道大家在开发中有没有遇到过『excel导出』的需求,反正我最近写了不少这种功能,刚开始利用poi,一行行的手动塞数据,生成excel,而且还有国际化需求,比如:标题栏有一列,用户切换成" ...

  4. jQuery插件备忘

    jQuery BlockUI Plugin  遮罩插件                                                                          ...

  5. Geek/Git中文怎么读

    Geek怎么读 英[gi:k] = gay客 = 给客 Git怎么读 英[gɪt] = gay 特 = 给特 Flux怎么读 英[flʌks] = 佛拉克斯 Redux怎么读 英[ri:'dʌks] ...

  6. EAS开发报错 ：数据库表 或 视图 不存在

      一:原因分析     建模之后,发布数据时未能及时在数据库创建相应的表格或视图.   二:解决办法     建模视图下——右键模型——更新数据库.   三:名称字段.描述字段在数据库里的存储格式 ...

  7. c#异常重试机制

    有时候我们碰到程序异常了,想让程序继续重新执行,进行重试,这时候就需要有一个合适的方法来进行操作: 自己写代码控制太麻烦了,也容易出错.这时候当然是站在巨人的肩膀上, https://github.c ...

  8. Flutter Android 真机调试指南

    操作预览: 准备一条数据线,并连接电脑和手机: 使用 flutter devices 查看设备能否找到: 在 Android studio 中选择你的真机,然后点击 [debug]: 真机自动安装Ap ...

  9. ComputeShader中Counter类型的使用

    接上一篇:https://www.cnblogs.com/hont/p/10122129.html 除了Append类型对应的Consume/AppendStructuredBuffer还有一个Cou ...

  10. [U3D Demo] 手机飞机大战

    游戏截图 使用插件 DOTween NGUI 游戏介绍 游戏使用C#开发,素材是<全民飞机大战>中提取出来的,该游戏最早是去年由Flash Air+Starling开发的Demo,后来我修 ...