webpack 简介

Paste_Image.png

webpack的优点

代码拆分

webpack有两种组织代码的方式 一种是同步一种是异步。异步依赖作为分割点，形成一个新的块。在优化过了依赖树后，每一个异步区块都作为一个文件被打包。

loader

webpack 本身只处理原生的js,但是loader转化器可以将各种资源转换成为js模块。这样任何资源都可以成为 webpack的处理对象。比如处理css的cssloader,处理coffeescript coffeesecriptloader。

智能解析

webpack是一个智能解析器，可以处理几乎任何第三方的库，无论他们的模块形式是commonjs，amd 还是普通的js文件。甚至加载依赖的时候可以动态表达式

require("./templates/" + name + ".jade")

插件系统

webpack有丰富的插件系统。大多数的功能都可以通过这个插件系统运行。还可以开发和使用开源的webpack的插件，来满足各式各样的需求。

安装

首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。
用 npm 安装 Webpack：

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h
试试。

通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

进入项目目录,确定已经有 package.json，没有就通过 npm init 创建安装 webpack 依赖

npm install webpack --save-dev

Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能并且和稳定版不兼容，在正式项目中应该使用稳定版。
查看 webpack 版本信息

$ npm info webpack

如果需要使用 Webpack 开发工具，要单独安装：

$ npm install webpack-dev-server --save-dev

loader

webpack本身只处理javascript, 如果要处理其他的类型要引用不同的loader。

1.loader可以以管道的方式连接
2.同步或者异步执行
3.接受参数
4.运行在nodejs的环境中，所以可以做任何的事情
5.loader可以通过文件扩展名（或正则表达式）绑定给不同的文件
6.loader通过npm安装
7.loader可以访问配置
8.可以require引用模块的时候使用，也可以在webpack的全局配置中指定，还可以通过命令行来执行。
9.插件可以使loader具有更多的属性

通过require来使用loader
例如引用一个css文件

/*style.css*/
body {
  background: #fef;
}

require('style!css! ./style.css');//载入css文件

安装loader

npm install css-loader style-loader

通过命令行来指定配置

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

webpack配置文件

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

默认webpack.config.js

这样就直接执行webpack就好了，css文件就直接调用好了

require('./style.css');

plugin

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

webpack内置了很多的插件，这里我们利用webpack的BannerPlugin,这个插件的作用是给输出文件添加注释头。
具体配置如下：

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('这是一个注释头')
]
}

webpack的开发环境

当项目逐渐变大了，webpack的时间会越来越长，通过参数可以让编译的内容带颜色和进度。

webpack --progress --colors

每次修改都需要编译，可以开启监听模式，那么每次更改自动更新。

webpack --progress --colors --watch

当然，使用 webpack-dev-server
开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

npm install webpack-dev-server -g 

运行

 webpack-dev-server --progress --colors