优化

压缩

通过简单的配置可以让webpack压缩你的javascript代码。

--optimize-minimize 或new webpack.optimize.UglifyJsPlugin()

这是一个简单并有效优化你应用的方式
如果你已经知道webpack给每个模块和分块提供了id去标识他们，webpack可以通过一个简单的配置
改变id的分配，通过给常用模块最短的id进行优化

--optimize-dedupe 或new webpack.optimize.DedupePlugin()

入口块有更高的文件大小优先级

去重

如果使用一些库时，会发现一些文件是相同的，webpack可以找到这些文件并且去重，这可以阻止
在打包文件中包含重复的代码，并且在运行时提供一个复制函数，这不会影响语法问题，可以这样
嵌入它

--optimize-dedupe 或 new webpack.optimize.DedupePlugin()

这个功能会在入口快之前添加。

分块

当在写代码时，可能你已经添加了一下代码分离点来按需加载，在编译之后你可能会发现有太多特别
小的分块，Http请求负担加重，幸运的是，你可以后置的去处理这些块文件，可以有两种配置。

• 限制块文件的最大个数:

  --optimize-max-chunks 15或者new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15})

• 限制最小块文件的大小

  --optimize-min-chunk-size 10000或new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})

webpack会小心的处理分块合并（优先合并有重复的分块），任何东西都不会合并到入口块中，所以
不会影响首页加载时间

单页面应用

webpack就是用来处理单页面应用而设计和优化的。
你或许已经分离应用到多个分块，根据不同的路由加载不同的块，入口块只包含了路由和一些库，但
没有实质内容，这种做法对于应用中的浏览切换时很好的，但是首页加载需要两次请求：一次是路由
一次是页面内容。
如果你使用了 HTML5 的 history api 来做页面内容和 url 的一一对应，那么服务端就能根据
url来知道请求的具体单页应用中的哪一个页面.这样，可以通过服务端直接同时输出请求页面的处理分块，
利用浏览器的并行加载来节省网络请求时间.

<script src="entry-chunk.js" type="text/javascript" charset="utf-8"></script>
<script src="3.chunk.js" type="text/javascript" charset="utf-8"></script>

你可以从stats中提取出分块的名字(stats-webpack-plugin导出构建的stats)

多页面应用

当你编译多页面应用时，你想在页面之间共享公共的代码，这对于webpack很简单，只需要使用多个
入口点``

module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3"
    },
    output: {
        filename: "[name].entry.chunk.js"
    }
}

这会生成多个入口文件，p1.entry.chunk.js,p2.entry.chunk.js,p3.entry.chunk.js，
但是他们可以共享额外的块文件。
如果入口块有使用相同的模块，CommonsChunkPlugin可以找出相同的模块然后把他们提取出来
放到一个公共分块中,这样，页面中只需要引入两个 script，一个是公共分块另一个则是该页面的入口块。

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3"
    },
    output: {
        filename: "[name].entry.chunk.js"
    },
    plugins: [
        new CommonsChunkPlugin("commons.chunk.js")
    ]
}

这样会生成p1.entry.chunk.js、p2.entry.chunk.js 和 p3.entry.chunk.js 以及
commons.chunk.js。首先加载 commons.chunk.js，然后加载对应的入口块。
你可以通过选择入口块生成多个公共块，公共块也可以嵌套使用.

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3",
        ap1: "./admin/page1",
        ap2: "./admin/page2"
    },
    output: {
        filename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
        new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
    ]
};
// <script>s required:
// page1.html: commons.js, p1.js
// page2.html: commons.js, p2.js
// page3.html: p3.js
// admin-page1.html: commons.js, admin-commons.js, ap1.js
// admin-page2.html: commons.js, admin-commons.js, ap2.js

高级用法，公共块的代码也可以直接运行

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        commons: "./entry-for-the-commons-chunk"
    },
    plugins: [
        new CommonsChunkPlugin("commons", "commons.js")
    ]
};

查看multiple-entry-points example
advanced multiple-commons-chunks example.