webpack 是什么？

webpack是模塊化管理工具，使用webpack可以對模塊進行壓縮、預處理、按需打包、按需加載等。

webpack 有哪些重要特征？

插件化：webpack本身非常靈活，提供了豐富的插件接口。基于這些接口，webpack開發了很多插件作為內置功能。
速度快：webpack使用異步IO以及多級緩存機制。所以webpack的速度是很快的，尤其是增量更新。
豐富的Loaders：loaders用來對文件做預處理。這樣webpack就可以打包任何靜態文件。
高適配性：webpack同時支持AMD/CommonJs/ES6模塊方案。webpack會靜態解析你的代碼，自動幫你管理他們的依賴關系。此外，webpack對第三方庫的兼容性很好。
代碼拆分：webpack可以將你的代碼分片，從而實現按需打包。這種機制可以保證頁面只加載需要的JS代碼，減少首次請求的時間。
優化：webpack提供了很多優化機制來減少打包輸出的文件大小，不僅如此，它還提供了hash機制，來解決瀏覽器緩存問題。
開發模式友好：webpack為開發模式也提供了很多輔助功能。比如SourceMap、熱更新等。
使用場景多：webpack不僅適用于web應用場景，也適用于Webworkers、Node.js場景

webpack 如何最佳配置？

webpack官方提供的配置方法是通過module.exports返回一個json，但是這種場景不靈活，不能適配多種場景。
比如要解決：production模式和development模式，webpack的配置是有差異的，大致有兩種思路。
1、兩份配置文件webpack.config.production.js/webpack.config.development.js，然后不同場景下，使用不同的配置文件。
2、通過module.exports返回函數，該函數能接受參數。

相對來說，第一種更簡單，但是重復配置多；第二種更靈活，推薦第二種方式。
那么，按返回函數的方式的配置代碼架子如下：

module.exports = function(env) {
  return {
    context: config.context,
    entry: config.src,
    output: {
        path: path.join(config.jsDest, project),
        filename: '[name].js',
        chunkFilename: '[name].[chunkhash:8].js',
        publicPath: '/assets/' + project + '/'
    },
    devtool: "eval",
    watch: false,
    profile: true,
    cache: true,
    module: {
        loaders: getLoaders(env)
    },
    resolve: {
        alias: getAlias(env)
    },
    plugins: getPlugins(env)
  };
}

其中關鍵的配置這兒簡單介紹如下，后續的系列博客會根據每個點詳細介紹。
context：上下文。
entry：入口文件，是所有依賴關系的入口，webpack從這個入口開始靜態解析，分析模塊之間的依賴關系。
output：打包輸出的配置。
devtools：SourceMap選項，便于開發模式下調試。
watch：監聽模式，增量更新，開發必備！
profile：優化。
cache：webpack構建的過程中會生成很多臨時的文件，打開cache可以讓這些臨時的文件緩存起來，從而更快的構建。
module.loaders：如前文介紹，loaders用來對文件做預處理。這樣webpack就可以打包任何靜態文件。
resolve.alias：模塊別名，這樣可以更方便的引用模塊。
plugins：如前文介紹，webpack的一些內置功能均是以插件的形式提供。

webpack和gulp的區別

gulp是基于流的構建工具：all in one的打包模式，輸出一個js文件和一個css文件，優點是減少http請求，萬金油方案。
webpack是模塊化管理工具，使用webpack可以對模塊進行壓縮、預處理、打包、按需加載等。