之所以学习它是因为最近又长草于React,发现在GitHub上的许多项目都提到了它.我现在对它只是一知半解,本着保持饥饿的学习态度.我们开始拔草吧.
由于英文水平有限,我习惯于先搜一下中文资料对它有个大概的了解.
我找到了这篇文章一小时包教会,嗯.我喜欢这个标题.
一. 初始并安装
新建一个工程来开始我的练习,在工作空间下新建一个webpack-baby_steps
文件夹,并初使化这个工程.
npm init
使用npm安装webpack.并写到package.json中
npm install webpack --save-dev
一. 配置
要让它为我们工作,我们需要告诉它我们需要干什么.在工程目录下新建一个webpack.config.js
这是必需的.
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件项
plugins: [commonsPlugin],
//页面入口文件配置
entry: {
index : './src/js/page/index.js'
},
//入口文件输出配置
output: {
path: 'dist/js/page',
filename: '[name].js'
},
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解决方案配置
resolve: {
root: 'D:/workspace/vs/webpack-baby_steps/src', //绝对路径
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
从上到下我们看一下每部分都是干什么的.
- 首先引入webpack模块.因为下面的配置都是基于它的.
- 下一行的
CommonsChunkPlugin
其实是一个插件,它的作用是提取多个页面的公共模块到一个文件中.例如a.html中需要a.js模块,而a.js模块依赖于jquery,bootstrap.js,one.js
. 这时我们又增加了一个b.html页,它里面需要b.js模块,同样的b.js中依赖于jquery,bootstrap.js,two.js
. 这时CommonsChunkPlugin
插件就会帮我们生成一个common.js
文件包含jquery,bootstrap.js这两个模块的文件. - 在往下看
plugins
,它的作用是配置我们需要的插件,如上面的CommonsChunkPlugin
. entry
,output
这两个属性分别对应着入口文件配置和输出文件配置信息,
{
entry: {
page1: "./page1",
//支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出
page2: ["./entry1", "./entry2"]
},
output: {
path: "dist/js/page",
filename: "[name].bundle.js" //name取值为entry中的key
}
}
该代码将在dist/js/page
目录下生成page1.bundle.js
,page2.bundle.js
5. module.loaders
告知 webpack 每一种文件都需要使用什么加载器来处理
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader 来处理,小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
resolve
resolve: {
//查找module的话从这里开始查找
root: process.cwd() + '/src', //绝对路径
//自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss'],
//模块别名定义,方便后续直接引用别名,无须多写长长的地址
alias: {
AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
二. 打包
运行webpack 当出错时显示详细信息.
webpack --display-error-details
其它参数还有
$ webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包
$ webpack --watch //监听变动并自动打包
$ webpack -p //压缩混淆脚本,这个非常非常重要!
$ webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了
三. 使用
具体使用时直接在页面中引入打包生成的文件即可
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script src="dist/js/page/common.js"></script>
<script src="dist/js/page/index.js"></script>
</body>
</html>