config.output

一般地，网络对于get请求会有缓存。所以浏览器对于我们的js和css静态资源也会做缓存。我们理想中的缓存是但我们的内容发生改变的时候，就更新；当内容没有发生改变的时候就使用缓存。这样的效率最高。

基于此，我们对js文件的内容做摘要算法得到一个字符串做为版本。

我们通过修改config.output来达到这样的目的。假设我们想要这样的效果：

1.产物输出到dist目录

2.输出的文件，文件名上带有自身的md5 hash值，作为版本号。比如a@abcd.js形式

配置js

第一个红色框是一份通用的数据配置，其中：

1. path 表示输出的目录是什么，根据我们假设的需求，设为dist
1. filename的命名规则是什么样子的。[name]表示文件本身的名字，[chunkHash]表示文件自身的hash值，[ext]表示文件自身的后缀。加起来就是在原本的文件名中插入自身的hash。

第二个红色框框表示，将此配置应用到commonChunk生成的common文件的命名上。
第三个红色框框表示，对local，dev，beta，prd三个环境都使用同样的配置。local对应的是ykit server状态；dev对应的是ykit pack状态，beta和prd对应的都是ykit pack -m状态。
beta 是预上线环境，理论上应该和线上prd是一样的，所以默认的配置beta和prd一致。不过实际应用如果一定要区分beta和prd，需要在package.json里面增加一行配置"enableBeta": true。

我们执行起来试试:

我们应该得到我们要的结果。修改html中的路径的 prd 为 dist，然后启动服务刷新页面

sudo ykit s --hot

注意我们local模式下，并没有生成hash

配置css

因为处理css的插件ExtractTextWebpackPlugin对hash的配置的模式名字为contenthash，所以，我们对js配置的chunkhash他并不识别。

需要替换现在的css处理的loader来解决这件事情。我现在采用的ykit的版本是0.7.7，此时还是webpack1版本，我们需要指定插件版本。我们安装如下几个依赖:

npm install webpack@1.14.0 css-loader@0.23.1 style-loader@0.13.1 extract-text-webpack-plugin@1.0.1 --save

另外我注意下，我这里使用的是--save选项，正常的话，应该放到--save-dev里面。因为在线上安装的时候，为了加速有时候会省去devDependencies下的依赖的安装，此时的话，编译插件无法安装，将导致项目无法正常编译构建。

修改ykit.js配置，

ExtractPlugin的用法和其文档对Webpack的用法一致，只是loader和plugins放置的位置不一致。

注意里面css loader替换的用法，和插入plugins的方法。

然后我们打包查看。

增加环境特定变量

开发中可能有这样的需求，比如数据请求的url，在不同的环境下请求的url可能是不一样的。本地开发的时候用的是mock的接口，线上用的是线上的接口地址。如何根据环境不同设置不同的参数呢？

第一步建立一个参数配置文件envParam.js

第二步通过DefinePlugin注入

第三步试用

注意如果不生效的话，重启ykit server重试

动态加载

在开发大型的项目的时候，为了性能，往往采取动态加载的方式来加载更多的JS文件。接下来我们就看下如何来配置动态加载。

代码准备，新建一个components/dialog/index.js作为一个需要懒加载的文件。然后在index.js中引入他。

需要注意，require.ensure里面的call函数，形参必须是require，因为只有是这个才能会webpack静态分析到。换成其他的名字就不对了

先看看效果吧

404 找不到，因为路径不对。

output配置chunkFileName和publicPath

因为通过webpack提供的require.ensure方式生成的代码分割没有通过entry配置入口，所以不想一般的命名，一般采用系统产生的id编号来表标记。
webpack在构建的时候也知道路径是什么样子的，其实并不知道应该如何生成完整的url，所以需要配置publichPath来知道如何生成完成的url。

配置需要修改的部分：