1.什么是webpack

正如官网对webpack的描述，它是一种模块化加载器，当然也不仅仅限于此。某种程度上来说，可以代替某些gulp的功能，至少有些还是无法替代的。在webpack中所有的资源都会被视作模块来处理，为了应对这样的情况，webpack有对应的loader机制来处理，另外shim，plugins，和其他构建工具，一样一样的，更多的细节，需要你在实际的应用中慢慢去体会了。

2.webpack的使用方法

webpack认为一个项目（或者一个页面），总有一个入口文件，就像C语言中总有一个main函数一样。假设，我们创建两个文件./main.js和./query.js，并且将main.js做为我们项目的入口文件。
query.js

 module.exports = function(){
         var version = 1.0.0;
         console.log(version)
    }

main.js

var query = require('./query');
    query();

创建一个webpack.config.js文件

    var config = {
        entry:'./main.js',
        ouptut:{
            path:'./js'
            filename:'main.js'
        }
    }
    module.exports = config;

在你的终端上运行webpack即可，默认webpack命令就等于webpack --config webpack.config.js你也可以修改默认的配置文件的名字，像这样：webpack --config webpack.custom.js。

3.webpack配置详解

entry####

entry属性做为可配置的入口，比如上面所写的./main.js。entry有三种写法，每一个入口可以称之为一个chunk。

1.如果为字符串，只会打包一个顺序依赖的模块，输出则根据output配置而定。
entry: __dirname + "/app/main.js"
2.如果为数组，只会打包一个顺序依赖的模块，合并到最后一个模块时导出，输出则根据output配置而定。
entry: [__dirname + "/app/temp.js",__dirname + "/app/main.js"]
3.如果为对象，则会根据入口打包多个顺序依赖的模块，key名会根据在output的配置输出。

    entry: {
        file1: __dirname + '/app/temp.js',
        file2: __dirname + '/app/main.js'
    }

output####

输出规则，在此对象中设置。

path 设置输出的文件路径
filename 设置输出文件名，filename可以有多种配置，比如main.js，[id].js，[name].js，[hash].js等
publicPath 设置资源的访问路径
library 设置模块导出的类名
libraryTarget:'umd' 设置模块兼容模式,umd模式是兼容commonjs、AMD和CMD的。参数可以有commonjs和amd、cmd、umd可选。
umdNamedDefine:true 同上

devtool####

将devtool设置为source-map，在开发调试阶段非常有用，它的模式非常多，可自行去搜索了解。

loader####

loader机制应该是webpack中非常重要的部分了，它是一系列资源的最终执行者。一般情况下，你可以访问：webpack loader来访问可用loader列表。
比如现在我想将.html类型的文件，当做一个模块来载入:
npm install raw-loader

    module:{
        loaders:[
            {
                test:/\.html$/,
                loader:'raw',
                exclude:/(node_modules)/
            }
        ]
    }

每一个loader都可以用一个对象来描述，test是你的匹配规则，loader是你要载入的loader，exclude是你在执行规则是想忽略的目录。

plugins####

webpack的插件机制也非常的重要，其内置了多种插件，比如混淆，压缩等等。插件列表可以访问：list of plugins。
正常情况下可以使用官方自带的插件：

    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false//
        }
    })

当然，我们也可以引入第三方插件，使用你的npm install吧。

resolve####

此配置可以对一些常用模块设置别名，比如a.js放置在./src/module/address/中，每次载入模块需要var a = require('./src/module/address/a');名字非长，如果设置别名了，只需要var a = require('a')；

    resolve:{
        alias:{
            "RequestModel":path.resolve(__dirname,'src/lib/request.model')
        }
    },

还可以设置访问路径，以及模块载入后缀。

    resolve:{
        root:path.resolve(filePath,'/src'),
        extensions:['','.js']
    }

externals####

此项配置可以将某些库设置为外部引用，内部不会打包合并进去。

    externals:{
        jquery:'window.jQuery'
    }

具体解释一下，有的时候我们不希望把有些文件用webpack打包一起使用，而是想用script标签引入的方式使用如

引入之后，此时会有window.jquery这个全部变量了，我们使用jquery就可以这样：
var $ = window.jQuery
但是我们希望可以用CMD、AMD等形式来使用jquery怎么办呢？如：
var $ = require('jquery')
可以使用externals来解决:

    externals:{
        jquery:'window.jQuery',
        jquery: true //jquery: 'jquery'一样
    }

webpack 1.0 入门