作者 : svon

日期 : 2016年10月26日

webpack

webpack the flexible module bundler

webpack 是一款弹性打包工具，灵活，简单

install

webpack 是运行在 node.js 中的一款模块，所以直接使用 npm 安装

npm install webpack --global

我们需要全局安装 webpack, 与 gulp 一样需要在全局环境中注册 webpack cli 命令

npm install webpack --save-dev

安装好全局 webpack 后，我们还需要在项目中安装 webpack 模块

config

在项目根目录中创建 webpack.config.js，此文件是对 webpack 的详细配置

使用 webpack cli 配置 webpack，需要返回一个对象

module.exports = {
// configuration
};

entry

定义入口文件，入口文件可以理解为一个网页，只有一个文件，通过入口文件自动的依赖其它 js 模块

{
entry: {
//对单独的某一个文件打包
page1: "./page1",
//对多个文件打包，然后一起输出
page2: ["./entry1", "./entry2"]
}
}

output

{
entry: {
//对单独的某一个文件打包
page1: "./page1",
//对多个文件打包，然后一起输出
page2: ["./entry1", "./entry2"]
},
output: {
//输出目录
path: './built'
//输出地址，输出的事公共的 url 地址
publicPath: './built',
//输出名称
filename: 'bundle.js',
}
}

module

定制如何编译文件，具体设置某类文件该如何编译，与 gulp 中的 pipe 类似
在 webpack 中任何文件都是一个模块，这个模块如何编译由 module 来决定

module.loaders

{
module : {
loaders : [
{
//判断需要满足编译条件的文件
test: /\.js[x]$/, //此处是正则表达式
//排除的文件，排除这个目录下的文件
exclude: /node_modules/,
//使用什么模块来编译
loader: ['babel'],
//可选配置，用于处理 loader 编译的编译配置参数
query : {

}
}
]
}
}

查看关于 loaders 的更多配置选项

resolve

配合模块使用, 该配置会覆盖 module.loaders 里的配置

{
resolve: {
//定义模块查找从什么目录开始
//必须是绝对路径
root: [ path root ],
// 自动扩展文件后缀名，
// require 模块时可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss'],
// 模块别名定义，方便后续直接引用别名，无须多写长长的地址
//
alias: {
// 与 require.js 中的 config.paths 一样
}
}
}

浏览官网更多配置资料

快捷命令

webpack -w  监听文件变化

webpack -d  源码输出

webpack -p  压缩