webpack概念以及配置文件详解

Webpack 概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph）,其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

模块（Modules）：

在模块化编程中，将程序分解成离散功能模块（discrete chunks of functionality）。

每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

webpack 模块：

webpack 模块能够以各种方式表达它们3的依赖关系，例如：

ES2015

import

语句

CommonJs

require()

语句

AMD

define

和

require

语句

css/sass/less 文件中的

@import

语句

样式（

url(...)

）或 HTML 文件（

<img src=...>

）中的图片链接（image url）

webpack 1 需要特定的 loader 来转换 ES 2015

import

，然而通过 webpack 2 可以开箱即用。

webpack 支持的模块类型：

webpack 通过 loader 可以支持各种语言和预处理器编写模块。loader 描述了 webpack 如何处理非 JavaScript(non-JavaScript)模块，并且在 bundle 中引入这些依赖。

webpack是高度可配置的，但是必须先理解4个核心概念：

一、入口（entry）：入口起点（entry point）指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后， webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。* 每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。*

//可以通过在 webpack.config.js 文件中配置 entry 属性，来指定一个入口起点:
module.exports = {
entry : './path/to/my/entry/files.js'
}

更多使用方法查询：https://doc.webpack-china.org/concepts/entry-points

二、 输出（output）:告诉 webpack 在哪里输出它所创建的 bundles ，以及如何命名这些文件。

module.exports = {
output: {
path       : './dist',
//按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）
publicPath : '/dist',
filename   : 'js/[name].js'
}
}

代码解释：

1.通过

output.filename

和

output.path

属性，来告诉 webpack bundle 的名称，以及我们想要生成（emit）到哪里。

2.更多属性请查询：https://doc.webpack-china.org/configuration/output

三、loader：让 webpack 能够处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后就可以利用 webpack 的打包能力，对它们进行处理。

loader 用于对模块的源代码进行转换。loader 可以使你在

import

或“加载”模块时预处理文件。因此，loader 类似于其他构建工具中”任务（task）”,并提供了处理前端构建步骤的强大办法。loader 可以将文件从不同的语言转换为 JavaScript ，或将内联图像转换为 data URL. loader 甚至允许你直接在 JavaScript 模块中

import

CSS 文件。

使用方法查阅：https://doc.webpack-china.org/concepts/loaders

四、 插件（plugins）：插件的目的在于解决 loader 无法实现的其他事。

webpack 插件是一个具有

apply

属性的 JavaScript 对象。

apply

属性会被webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

Function.prototype.apply

：通过这个方法可以把任意函数作为插件传递（

this

将指向

compiler

）。

具体用法请查阅：https://doc.webpack-china.org/concepts/plugins

完整的 webpack 配置文件实例（webpack 1.X）

var webpack                      = require('webpack');
var ExtractTextPlugin            = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin            = require('html-webpack-plugin');

//环境变量配置，dev / online
var WEBPACK_ENV              = process.env.WEBPACK_ENV || 'dev';
console.log(WEBPACK_ENV);

//获取html-webpack-plugin的参数的方法
var getHtmlConfig=function(name,title){
return {
template       : './src/view/' + name + '.html',
filename       : 'view/' + name + '.html',
title          : title,
inject         : true,
hash           : true,
chunks         : ['common',name]
};
};

//webpack config
var config ={
//多个入口配置
entry : {
'common'              : ['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
'index'               : ['./src/page/index/index.js'],
'list'                : ['./src/page/list/index.js'],
'detail'              : ['./src/page/detail/index.js'],
'cart'                : ['./src/page/cart/index.js'],
'order-confirm'       : ['./src/page/order-confirm/index.js'],
'order-list'          : ['./src/page/order-list/index.js'],
'order-detail'        : ['./src/page/order-detail/index.js'],
'payment'             : ['./src/page/payment/index.js'],
'user-login'          : ['./src/page/user-login/index.js'],
'user-register'       : ['./src/page/user-register/index.js'],
'user-pass-reset'     : ['./src/page/user-pass-reset/index.js'],
'user-center'         : ['./src/page/user-center/index.js'],
'user-center-update'  : ['./src/page/user-center-update/index.js'],
'user-pass-update'    : ['./src/page/user-pass-update/index.js'],
'result'              : ['./src/page/result/index.js'],
},
//output
output : {
path       : './dist',
publicPath : '/dist',
filename   : 'js/[name].js'
},
/*防止将某些 import 的包(package)打包到 bundle 中，
而是在运行时(runtime)再去从外部获取这些扩展依赖*/
externals : {
'jquery' : 'window.jQuery'
},
//loaders
module : {
loaders : [
{ test : /\.css$/, loader:ExtractTextPlugin.extract("style-loader","css-loader")},
{ test : /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader:"url-loader?limit=100&name=resource/[name].[ext]"},
{
test   : /\.string$/,
loader : 'html-loader',
query  : {
minimize : true,
removeAttributeQuotes : false
}
}
]
},
//解析
resolve : {
//创建 import 或 require 的别名，来确保模块引入变得更简单。
alias : {
node_modules    : __dirname + '/node_modules',
util            : __dirname + '/src/util',
page            : __dirname + '/src/page',
service         : __dirname + '/src/service',
image           : __dirname + '/src/image'
}
},
//插件
plugins : [
//独立通用模块到js/base.js
new webpack.optimize.CommonsChunkPlugin({
name : 'common',
filename : 'js/base.js'
}),
//把css单独打包到文件里
new ExtractTextPlugin("css/[name].css"),
//html模板的处理
new HtmlWebpackPlugin(getHtmlConfig('index','首页')),
new HtmlWebpackPlugin(getHtmlConfig('list','商品列表')),
new HtmlWebpackPlugin(getHtmlConfig('detail','商品详情')),
new HtmlWebpackPlugin(getHtmlConfig('cart','购物车')),
new HtmlWebpackPlugin(getHtmlConfig('order-confirm','订单确认')),
new HtmlWebpackPlugin(getHtmlConfig('order-list','订单列表')),
new HtmlWebpackPlugin(getHtmlConfig('order-detail','订单详情')),
new HtmlWebpackPlugin(getHtmlConfig('payment','订单支付')),
new HtmlWebpackPlugin(getHtmlConfig('user-login','用户登录')),
new HtmlWebpackPlugin(getHtmlConfig('user-register','用户注册')),
new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset','找回密码')),
new HtmlWebpackPlugin(getHtmlConfig('user-center','个人中心')),
new HtmlWebpackPlugin(getHtmlConfig('user-center-update','修改个人信息')),
new HtmlWebpackPlugin(getHtmlConfig('user-pass-update','修改密码')),
new HtmlWebpackPlugin(getHtmlConfig('result','操作结果')),
]
};

if('dev' === WEBPACK_ENV){
config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

module.exports = config;

更多配置内容请查看：https://doc.webpack-china.org/configuration/