Webpack初识

作者 Simmin 日期 2016-11-07
前端自动化 gulp
Webpack初识

Webpack的安装

1. 安装Node

官方Node：https://nodejs.org，npm（基于命令行的node包管理工具）会一起被安装。

安装完成后使用相应命令可以查看版本号以确定是否成功安装

node -v 
//v4.4.5
npm -v 
//3.10.9

2. 安装Webpack

a. 先全局安装webpack

$ npm install webpack -g

webpack -h
//webpack 1.13.3

b. 项目根目录下创建package.json文件

优先使用命令行

$ npm init

也可以手动添加

{
  "name": "wp", //项目名称，这里不能为'webpack'，不然无法安装项目依赖
  "version": "1.0.0", //项目版本
  "description": "this is a test for webpack",  //项目描述
  "main": "bundle.js", //项目入口文件
  "keywords": [
    "webpack"
  ],
  "author": "simmin", //项目作者信息
  "license": "ISC" //项目许可协议
}

c. 再作为项目的开发依赖（devDependencies）安装

项目目录下：

$ npm install webpack --save-dev

Webpack的使用

1. 基础使用

a.创建index.html

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

b.创建entry.js

//entry.js
document.write('It works.')

c.编译打包

命令：

webpack entry.js bundle.js

运行日志：

Hash: 71820986fc674176394e
Version: webpack 1.13.3
Time: 32ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {0} [built]

用浏览器打开index.html可以看到It works

2. 更进一步

a. 在基础使用上创建module.js

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

b. 修改entry.js

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

c.编译打包

命令：

webpack entry.js bundle.js

运行日志：

Hash: e780647104b165cf6af5
Version: webpack 1.13.3
Time: 40ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.58 kB       0  [emitted]  main
   [0] ./entry.js 69 bytes {0} [built]
   [1] ./module.js 43 bytes {0} [built]

用浏览器打开index.html可以看到It works.It works from module.js.

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

3. 使用Loader

a. 为什么用Loader
Webpack本身只能处理JavaScript模块，其他文件类型的需要用Loader进行转换。
Loader可以理解为模块和资源的转换器，本身是一个函数，接收原文件作为参数，返回转换的结果。

b. 怎么用Loader
以读取css文件为例：

创建style.css:

/* style.css */
body { background: yellow; }

修改 entry.js：

require("!style!css!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))

安装 loader：

npm install css-loader style-loader

用 css-loader 来读取它，再用 style-loader 把它插入到页面中。

编译运行

webpack entry.js bundle.js

运行日志

Hash: e422c4f148f26b5cf639
Version: webpack 1.13.3
Time: 561ms
    Asset     Size  Chunks             Chunk Names
bundle.js  11.8 kB       0  [emitted]  main
   [0] ./entry.js 104 bytes {0} [built]
   [5] ./module.js 43 bytes {0} [built]
    + 4 hidden modules

用浏览器打开index.html可以看到黄色的背景。

如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。

将 entry.js 中的 require(“!style!css!./style.css”) 修改为 require(“./style.css”) ，然后执行：

$ webpack entry.js bundle.js --module-bind 'css=style!css'
// 有些环境下可能需要使用双引号
$ webpack entry.js bundle.js --module-bind "css=style!css"

显然，这两种使用 loader 的方式，效果是一样的。

4. 使用配置文件

从前面的学习我们知道，Webpack是通过在命令行传入参数来执行，此外，也可以通过指定的配置文件来执行。默认情况下是搜索webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 –config 选项来指定配置文件。

a. 在package.json中添加依赖

{
  "name": "wp", 
  "version": "1.0.0",
  "description": "this is a test for webpack",
  "main": "bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "webpack"
  ],
  "author": "simmin",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.10.9",
    "style-loader": "^3.10.9",
    "webpack": "^1.13.3"
  }
}

b. 创建配置文件webpack.config.js

var webpack = require('webpack')
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  }
}

c. 简化entry.js中的style.css加载方式

require('./style.css')

d. 编译运行

命令：

webpack

运行日志：

Hash: 95f9c0b19dc5695082bb
Version: webpack 1.13.3
Time: 525ms
    Asset     Size  Chunks             Chunk Names
bundle.js  11.8 kB       0  [emitted]  main
   [0] ./entry.js 94 bytes {0} [built]
   [5] ./module.js 43 bytes {0} [built]
    + 4 hidden modules

可以看到 webpack 通过配置文件执行的结果前面通过命令行 webpack entry.js bundle.js –module-bind ‘css=style!css’ 执行的结果是一样的

5. 使用插件

插件可以完成更多 loader 不能完成的功能。

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。

以最简单的BannerPlugin内置插件为例：

a. 修改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!css'}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('This file is created by simmin')
  ]
}

b. 编译运行

webpack

打开bundle.js可以看到文件头部：

/*! This file is created by simmin */
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
...
FRIENDS