×

webpack 简介

96
wpzero
2016.04.23 19:24* 字数 989
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
前端
Web note ad 1