webpack的基础入门

这里对于 webpack 的基础入门进行一些总结，可以参考 github 上的 webpack-demo ，链接是 https://github.com/RealAndMe/webpack-demo

1. 简介

webpack是前端资源加载/打包工具。它将根据模块的依赖关系将一些静态资源 js , less , css 等进行静态分析，然后转化为静态文件，减少页面请求，实现页面的优化。

2. 如何使用webpack

在安装webpack之前，你的本地环境必须要有 node.js 。可以参考之前的博客《npm使用指南》和《node.js的安装配置——前端配置》。

全局安装webpack和webpack-dev-server

//全局安装webpack 和 webpack-dev-server

$ npm install webpack -g

$ npm install webpack-dev-server -g

webpack 是用来读取配置文件 webpack.config.js ，并构建捆绑包的。

webpack-dev-server 是用来启动服务器的，绑定 localhost:8080，当更新入口文件时，浏览器会自动刷新。

`git clone` 克隆github上的代码，并安装依赖项

//克隆代码

$ git clone git@github.com:RealAndMe/webpack-demo.git

//目录下有一个webpack-demo文件夹，切换工作目录到webpack-demo

$ cd webpack-demo

//安装项目运行所依赖的模块

$ npm install

在对应的demo文件夹下面运行源文件

//切换目录，比如demo01

$ cd demo01

//启动服务器

$ webpack-dev-server

启动服务器后，浏览器输入 localhost:8080 就能看到 demo01 的页面内容了。

//webpack打包构建

$ webpack

命令执行之后，会看到 demo01 目录下，生成一个 bundle.js 文档。

下面根据 github 上的 demo 来进行讲解。

demo01: 入口文件（entry file）

查看demo01

main.js 是入口文件，webpack 读取和分析入口文件以及项目的依赖项，然后构建成捆绑文件boundle.js 输出。

index.html HTML文档， main.js 入口的js文件， webpack.config.js 是 webpack 的配置文件。

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>demo01</title>

<link rel="stylesheet" href="">

</head>

<body>

<script type="text/javascript" src="bundle.js"></script>

</body>

</html>

mian.js

document.write("<h1>hello world!</h1>");

webpack.config.js

module.exports = {

	entry: "./main.js",

	output: {

		filename: "bundle.js"

	}

};

代码写好后，在 demo01 目录下，执行命令：

//启动服务器，实现更新入口文件时浏览器自动刷新

$ webpack-dev-server

当 mian.js 文件更新时，执行上面命令行，浏览器自动刷新。浏览器的访问网址：localhost:8080

执行构建命令：

//运行构建

$ webpack

执行完后，会生成一个boundle.js 。

demo02: 多个入口文件

查看demo02

允许有多个入口文件。entry 可以有多个值。执行上述命令，启动服务器浏览内容。执行构建命令，打包入口文件。多个入口文件输出文件也对对应有几个。

webpack.config.js

module.exports = {

	entry: {

		bundle1: './main1.js',

		bundle2: './main2.js'

	},

	output: {

		filename: '[name].js'

	}

};

执行构建命令后，会生成两个文档，分别是bundle1.js 和bundle2.js

demo03: babel-loader

查看demo03

babel-loader 可以将 JSX 和 ES6 转换为 JS 文件。

需要的插件依赖有 babel-loader ，babel-core ，babel-preset-es2015 ，babel-preset-react ，react-dom ，react ，这些必须在 package.json 文档中配置好，可以通过命令 $ npm install express -save-dev 安装，其中 express 是需要安装的依赖名称。

webpack.config.js

module.exports = {

  entry: './main.jsx',

  output: {

    filename: 'bundle.js'

  },

  module: {

    loaders:[

      {

        test: /\.js[x]?$/,

        exclude: /node_modules/,

        loader: 'babel-loader?presets[]=es2015&presets[]=react',

      },

    ]

  }

};

代码写好后，在 demo03 目录下执行命令：

$ webpack-dev-server  //启动服务器，localhost:8080打开

$ webpack //编译构建

exclude:/node_modules/ 用来排除 npm 包，提高编译速度。

loaders 字段分配加载器， test 用正则表达式匹配不同后缀的文件，然后 loader 定义不同的加载器，

注意：问号？ 是通过字符串传递查询参数的，查询字符串格式取决与加载的程序。也可以用另外一种方式来写查询参数。

module: {

  loaders: [

    {

      test: /\.jsx?$/,

      exclude: /node_modules/,

      loader: 'babel-loader',

      query: {

        presets: ['es2015', 'react']

      }

    }

  ]

}

demo04: css-loader

查看demo04

webpack 允许 js 中请求 CSS 代码。

需要的插件依赖有 style-loader , css-loader

配置信息中需要两个加载器，style-loader 将 style 插入到 index.html 页面中。 css-loader 读取 CSS 文件。

注意：loader: "style-loader!css-loader" 两个加载器之间用感叹号 ！ 连接，两者顺序不要更换！

main.js

require("./app.css");

webpack.config.js

module.exports = {

  entry: './main.js',

  output: {

    filename: 'bundle.js'

  },

  module: {

    loaders: [{

      test: /\.css$/,

      loader: 'style-loader!css-loader',

      exclude: /node_modules/

    }, ]

  }

};

代码写好后，启动服务器，打开控制台，可以看到 index.html 有内联的样式表。

demo05: url-loader

查看demo05

webpack 允许 js 中请求图片。

需要的插件依赖有 file-loader , url-loader 。

url-loader 转换图像文件。后面加了查询参数如果图像尺寸小于8192字节，则将其转换为数据URL; 否则，它将被转换成普通的URL。

main.js

//创建新的元素

var img1 = document.createElement("img");

img1.src = require("./small.png");

//添加

document.body.appendChild(img1);

//创建新的元素

var img2 = document.createElement("img");

img2.src = require("./big.png");

//添加

document.body.appendChild(img2);

webpack.config.js

module.exports = {

  entry: './main.js',

  output: {

    filename: 'bundle.js'

  },

  module: {

    loaders:[

      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}

    ]

  }

};

注意：问号（？）用于将参数传递给装载机。

启动服务器后，打开控制台，small.png 和 big.png 将具有以下URL。

//small.png

<img src="data:image/png;base64,iVBOR...uQmCC">

//big.png

<img src="4853ca667a2b8b8844eb2693ac1b2578.png">

demo06: CSS Module

查看demo06

css-loader?modules 可以启动 CSS 模块的规范。

在默认情况下，模块的 CSS 是局部作用域范围的 CSS ，可以用 :global() 来关闭局部域的作用。

app.css

.h1 {

	 color:red;

	}

:global(.h2) {

  color: blue;

}

index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

	<h1 class="h1">Hello World</h1>

	<h2 class="h2">Hello Webpack</h2>

	<div id="contain"></div>

	<script src="bundle.js" type="text/javascript"></script>

</body>

</html>

main.jsx

var React = require('react');

var ReactDOM = require('react-dom');

var style = require('./app.css');

ReactDOM.render(

  <div>

    <h1 className={style.h1}>Hello World</h1>

    <h2 className="h2">Hello Webpack</h2>

  </div>,

  document.getElementById('contain')

);

启动服务器，打开浏览器，可以看到只有第二个h1是红色的，因为它的CSS是局部范围的，并且h2都是蓝色的，因为它的CSS是全局范围的。

demo07: UglifyJs Plugin

查看demo07

webpack 有许多扩展功能的插件，比如 uglifyjs plugin 是压缩输出的 boundle.js 的 JS 代码。

webpack.config.js 用到的字段 plugins 用来放插件的。

webpack.config.js

var webpack = require('webpack');

var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {

  entry: './main.js',

  output: {

    filename: 'bundle.js'

  },

  plugins: [

    new uglifyJsPlugin({})

  ]

}

启动服务器，可以看到浏览器页面没有多大的变化。

执行构建命令 $ webpack 可以看到 boundle.js 被压缩成一行，省去了所有的注释，并且将 main.js 细化如下：

var t="Hello";t+=" World",document.write("<h1>"+t+"</h1>")

demo08: 加载第三方插件

查看demo08

不是内置的插件，可以通过 npm install 安装，webpack 允许加载第三方插件。

webpack.config.js

//创建html文档

var htmlWepbackPlugin = require("html-webpack-plugin");

//自动打开浏览器

var openBrowserPlugin = require("open-browser-webpack-plugin");

module.exports = {

	entry: "./main.js",

	output: {

		filename: "boundle.js"

	},

	plugins: [

		new htmlWepbackPlugin(

			{

				title: "demo08",

				filename: "index.html"

			}

		),

		new openBrowserPlugin(

			{

				url: "http://localhost:8080"

			}

		)

	]

}

html-webpack-plugin 是创建一个 index.html 文档。

需要的依赖是：html-webpack-plugin

npm 安装插件，命令：

//创建.html文档

$ npm install html-webpack-plugin -save-dev

//自动打开浏览器

 $ npm install open-browser-webpack-plugin -save-dev

手动启动服务器，浏览器可以看到效果。

构建打包命令：$ webpack ，可以看到 demo 08 目录下生成了一个 index.html 和 bundle.js

open-browser-webpack-plugin 是在启动服务器命令webpack-dev-server时，会自动打开一个浏览器标签。

需要的依赖是：open-browser-webpack-plugin

有了这两个插件，就不用手写 index.html ，也不用手动打开浏览器了。

demo09: 代码分割

查看demo09

webpack 允许将代码分割成很多块，提高代码的复用。

webpack.config.js

//CommonJS的： require.ensure进行代码分割

require.ensure(['./a'], function(require) {　　//require作为参数发送给该函数

  var content = require('./a');　　//函数体进一步调用require执行所需要的模块。

  document.open();

  document.write('<h1>' + content + '</h1>');

  document.close();

});

使用 CommonJS 模块语法的 require.ensure 来定义分割点。

require.ensure(dependencies, callback)

dependencies ：字符串，声明 callback 要执行的代码所需要的所有模块。
callback 函数功能。将 require 作为参数发送给此函数，函数体可以使用它来进一步require()执行需要的模块。

执行命令$ webpack ，构建打包，会生成两个文档，bundle.js 和 0.bundle.js 。HTML文档根据需要，从bundle.js中加载0.bundle.js。

demo10: bundle-loader

查看demo10

代码分割，用 bundle-loader ，与 demo09 相似。

webpack.config.js

var load = require('bundle-loader!./a.js');

load(function(file) {

  document.open();

  document.write('<h1>' + file + '</h1>');

  document.close();

});

需要安装依赖： bundle-loader

demo11: 公共块（CommonsChunkPlugin）

查看demo11

CommonsChunkPlugin 由多个入口点之间共享的公共模块组成。

语法：

new webpack.optimize.CommonsChunkPlugin(options)

new webpack.optimize.CommonsChunkPlugin(options)不再支持废弃的webpack 1构造函数。改用相应的选项对象。

option 选项有：（具体可以参考其官网）

{

  //公共块的块名称

  name: string,

  //公共块的文件名名称

  filename: string,

  minChunks: number|Infinity|function(module, count) -> boolean,

  chunks: string[],

  children: boolean,

  async: boolean|string,

  minSize: number,

}

执行命令后，目录结构为：（init.js 是公共块）

demo12: 全局变量

查看demo11

如果你想要用一些全局变量，但是又不将它们包含在webpack捆绑包中，可以在 webpack.config.js 中添加一个字段 externals

webpack.config.js

module.exports = {

  entry: './main.jsx',

  output: {

    filename: 'bundle.js'

  },

  module: {

    loaders:[

      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },

    ]

  },

  externals: {

    'data': 'data'

  }

};

mian.jsx

var data = require('data');

var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h1>{data}</h1>,

  document.body

);

有道云笔记参考：http://note.youdao.com/noteshare?id=7ac7a9098e636391abc936e439146601&sub=5A5BC060648D43EF8017DF898C073B45