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/