webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
简单说就是模块加载器,通过使用Webpack,能够像Node.js一样处理依赖关系,然后解析出模块之间的依赖,将代码打包。
其主要特性如下:
首先得安装Node.js
$ npm install webpack -g
$ npm install webpack --save-dev
$ webpack -v
每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js ,就是一个配置项,告诉 webpack 它需要做什么。
webpack.config.js配置详解
这里给出我自己的配置:
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
plugins:[commonsPlugin],
entry: {
index:'./src/js/startup.js'
},
//入口文件输出配置
output:{
//path: 打包文件存放的路径
path:'./js',
//filename: 打包后的文件名
filename: '[name].bundle.js'
},
// externals: { //排除构建文件外
// 'react': 'React'
// },
module: {
//加载器配置
//module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理
loaders:[
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
//配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式 (其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.js$/,
loader: 'babel-loader',
query:{
presets:['es2015','react']
}
},
{
test: /\.jsx$/,
loader: 'babel-loader!jsx-loader?harmony'
}
]
},
resolve: { extensions: ['', '.js', '.jsx'] }
}
这里对Webpack的打包行为做了配置,主要分为几个部分:
Webpack还有很多其他的配置,具体可以参照它的配置文档
对应各种不同文件类型的资源, Webpack 有对应的模块 loader。比如 CoffeeScript 用的是 coffee-loader, 其他还有很多。请参考相关文档
在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。
Webpack的加载器支持参数,jsx-loader就可以添加?harmony参数使其支持ES6语法。为了让Webpack识别什么样的资源应该用什么加载器去载入,需要在配置文件进行配置:通过正则表达式对文件名进行匹配。
加载器之间的级联是通过感叹号来连接,例如对于LESS资源,写法为style-loader!css-loader!less-loader。对于小型的图片资源,也可以将其进行统一打包,由url-loader实现,代码中url-loader?limit=8192含义就是对于所有小于8192字节的图片资源也进行打包。这在一定程度上可以替代Css Sprites方案,用于减少对于小图片资源的HTTP请求数量。
如果通过npm install -g webpack方式安装webpack的话,可以通过命令行直接执行打包命令,比如:
$ webpack –config webpack.config.js
这样就会读取当前目录下的webpack.config.js作为配置文件执行打包操作
require(‘lodash’) // 从模块目录查找
require(‘./file’) // 按相对路径查找
require(‘./bootstrap.css’);
require(‘./myapp.less’);
var img = document.createElement(‘img’);
img.src = require(‘./glyph.png’);
一个模块需要用它的文件路径来加载,看一下下面的这个结构:
–app
——modules
———–MyModule.js
——main.js (entry point)
——utils.js
打开 main.js 然后可以通过下面两种方式引入 app/modules/MyModule.js
app/main.js
// ES6
import MyModule from ‘./modules/MyModule.js’;
// CommonJS
var MyModule = require(‘./modules/MyModule.js’);
最开始的 ./ 是 “相对当前文件路径”
让我们打开 MyModule.js 然后引入 app/utils:
app/modules/MyModule.js
// ES6 相对路径
import utils from ‘./../utils.js’;
// ES6 绝对路径
import utils from ‘/utils.js’;
// CommonJS 相对路径
var utils = require(‘./../utils.js’);
// CommonJS 绝对路径
var utils = require(‘/utils.js’);
相对路径是相对当前目录。绝对路径是相对入口文件,这个案例中是 main.js。
初步学习React和Webpack中,后续继续完善学习……