Webpack 概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph）,其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
模块（Modules）：
在模块化编程中，将程序分解成离散功能模块（discrete chunks of functionality）。
每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
webpack 模块：
webpack 模块能够以各种方式表达它们3的依赖关系，例如：
ES2015import语句
CommonJsrequire()语句
AMDdefine和require语句
css/sass/less 文件中的@import语句
样式（url(...)）或 HTML 文件（<img src=...>）中的图片链接（image url）
webpack 1 需要特定的 loader 来转换 ES 2015import，然而通过 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 模块中importCSS 文件。
使用方法查阅：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;