docs: add change log

docs/build/mpvue-loader.md

@@ -124,8 +124,16 @@ export default {
 这个部分的处理同 web 的处理差异不大，唯一不同在于通过配置生成 `.css` 为 `.wxss` ，其中的对于 css 的若干处理，在 [postcss-mpvue-wxss](/build/postcss-mpvue-wxss/) 和 [px2rpx-loader](/build/px2rpx-loader/) 这两部分的文档中又详细的介绍。
 
 ### app.json／page.json
+
+`1.1.1 以上`
+
+推荐和小程序一样，将 app.json／page.json 放到页面入口处，使用 copy-webpack-plugin copy 到对应的生成位置。
+
+`1.1.1 以下`
+
 这部分内容来源于 app 和 page 的 entry 文件，通常习惯是 main.js，你需要在你的入口文件中 `export default { config: {} }`，这才能被我们的 loader 识别为这是一个配置，需要写成 json 文件。
-``` javascript
+
+```javascript
 import Vue from 'vue';
 import App from './app';
 

docs/build/px2rpx-loader.md

@@ -6,7 +6,6 @@ Owl.start({
 })
 </script>
 
-
 # px2rpx-loader
 
 同 [px2rem](https://github.com/songsiqi/px2rem) 一摸一样的用法，唯一的差异在于我们改变了部分内部实现，使其更好的展现在小程序中。

docs/build/webpack-mpvue-asset-plugin.md

@@ -0,0 +1,20 @@
+# webpack-mpvue-plugin
+
+> mpvue 资源路径解析插件
+
+## 使用示例：
+
+```js
+const MpvuePlugin = require('webpack-mpvue-asset-plugin')
+// webpack config
+{
+  entry: [],
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'foo.bundle.js'
+  },
+  plugins: [
+    new MpvuePlugin()
+  ]
+};
+```

docs/change-log/2018.7.24.md

@@ -0,0 +1,253 @@
+## mpvue-loader@1.1.2-rc.4+ 升级指南
+
+> 本次升级意在调整生成文件目录结构，对依赖的文件由原来的写死绝对路径该改为相对路径，1.1.x 版本还不是很稳定，对稳定性要求较高的项目建议暂时使用 1.0.x 版本
+
+### 不兼容的地方
+
+1. mpvue-loader@1.1.2-rc.4+ 依赖 webpack-mpvue-asset-plugin@0.1.1+ 做依赖资源引用
+2. 之前写在 main.js 中的 config 信息，需要在 main.js 同级目录下新建 main.json 文件，使用 webapck-copy-plugin copy 到 build 目录下
+
+### 那些坑
+
+1. app.json 中引用的图片不会自动 copy 到 dist 目录下
+  json 配置文件是由 webapck-copy-plugin copy 过去的，不会处理依赖，可以将图片放到根目录下 static 目录下，使用 webapck-copy-plugin copy 过去
+
+### webpack 配置配合升级指南
+
+#### build/webpack.base.conf.js
+
+```js
+// build/webpack.base.conf.js
+
++var CopyWebpackPlugin = require('copy-webpack-plugin')
++var relative = require('relative')
+
+ function resolve (dir) {
+   return path.join(__dirname, '..', dir)
+ }
+
+-function getEntry (rootSrc, pattern) {
+-  var files = glob.sync(path.resolve(rootSrc, pattern))
+-  return files.reduce((res, file) => {
+-    var info = path.parse(file)
+-    var key = info.dir.slice(rootSrc.length + 1) + '/' + info.name
+-    res[key] = path.resolve(file)
+-    return res
+-  }, {})
++function getEntry (rootSrc) {
++  var map = {};
++  glob.sync(rootSrc + '/pages/**/main.js')
++  .forEach(file => {
++    var key = relative(rootSrc, file).replace('.js', '');
++    map[key] = file;
++  })
++   return map;
+ }
+
+const appEntry = { app: resolve('./src/main.js') }
+ const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
+ const entry = Object.assign({}, appEntry, pagesEntry)
+
+@@ -108,6 +122,14 @@ module.exports = {
+     ]
+   },
+   plugins: [
+-    new MpvuePlugin()
++    new MpvuePlugin(),
++    new CopyWebpackPlugin([{
++      from: '**/*.json',
++      to: ''
++    }], {
++      context: 'src/'
++    })
++    new CopyWebpackPlugin([ // 处理 main.json 里面引用的图片，不要放代码中引用的图片
++      {
++        from: path.resolve(__dirname, '../static'),
++        to: path.resolve(__dirname, '../dist/static'),
++        ignore: ['.*']
++      }
++    ])
+   ]
+ }
+```
+
+#### build/webpack.dev.conf.js
+
+修改生成文件的路径，让生成的文件路径可以放在原来的 page 下面
+
+```js
+module.exports = merge(baseWebpackConfig, {
+   devtool: '#source-map',
+   output: {
+     path: config.build.assetsRoot,
+-    filename: utils.assetsPath('js/[name].js'),
+-    chunkFilename: utils.assetsPath('js/[id].js')
++    filename: utils.assetsPath('[name].js'),
++    chunkFilename: utils.assetsPath('[id].js')
+   },
+   plugins: [
+     new webpack.DefinePlugin({
+@@ -42,8 +42,8 @@ module.exports = merge(baseWebpackConfig, {
+     // copy from ./webpack.prod.conf.js
+     // extract css into its own file
+     new ExtractTextPlugin({
+-      filename: utils.assetsPath('css/[name].wxss')
++      filename: utils.assetsPath('[name].wxss')
+     }),
+@@ -53,7 +53,7 @@ module.exports = merge(baseWebpackConfig, {
+       }
+     }),
+     new webpack.optimize.CommonsChunkPlugin({
+-      name: 'vendor',
++      name: 'common/vendor',
+       minChunks: function (module, count) {
+         // any required modules inside node_modules are extracted to vendor
+         return (
+@@ -64,17 +64,9 @@ module.exports = merge(baseWebpackConfig, {
+       }
+     }),
+     new webpack.optimize.CommonsChunkPlugin({
+-      name: 'manifest',
+-      chunks: ['vendor']
++      name: 'common/manifest',
++      chunks: ['common/vendor']
+     }),
+-    // copy custom static assets
+-    new CopyWebpackPlugin([
+-      {
+-        from: path.resolve(__dirname, '../static'),
+-        to: config.build.assetsSubDirectory,
+-        ignore: ['.*']
+-      }
+-    ]),
+```
+
+#### build/webpack.prod.conf.js
+
+同 build/webpack.dev.conf.js 一样
+
+```js
+@@ -24,10 +24,10 @@ var webpackConfig = merge(baseWebpackConfig, {
+   devtool: config.build.productionSourceMap ? '#source-map' : false,
+   output: {
+     path: config.build.assetsRoot,
+-    filename: utils.assetsPath('js/[name].js'),
+-    chunkFilename: utils.assetsPath('js/[id].js')
++    filename: utils.assetsPath('[name].js'),
++    chunkFilename: utils.assetsPath('[id].js')
+   },
+   plugins: [
+     // http://vuejs.github.io/vue-loader/en/workflow/production.html
+@@ -39,8 +39,8 @@ var webpackConfig = merge(baseWebpackConfig, {
+     }),
+     // extract css into its own file
+     new ExtractTextPlugin({
+-      // filename: utils.assetsPath('css/[name].[contenthash].css')
+-      filename: utils.assetsPath('css/[name].wxss')
++      // filename: utils.assetsPath('[name].[contenthash].css')
++      filename: utils.assetsPath('[name].wxss')
+     }),
+     // Compress extracted CSS. We are using this plugin so that possible
+     // duplicated CSS from different components can be deduped.
+@@ -72,7 +72,7 @@ var webpackConfig = merge(baseWebpackConfig, {
+     new webpack.HashedModuleIdsPlugin(),
+     // split vendor js into its own file
+     new webpack.optimize.CommonsChunkPlugin({
+-      name: 'vendor',
++      name: 'common/vendor',
+       minChunks: function (module, count) {
+         // any required modules inside node_modules are extracted to vendor
+         return (
+@@ -85,17 +85,9 @@ var webpackConfig = merge(baseWebpackConfig, {
+     // extract webpack runtime and module manifest to its own file in order to
+     // prevent vendor hash from being updated whenever app bundle is updated
+     new webpack.optimize.CommonsChunkPlugin({
+-      name: 'manifest',
+-      chunks: ['vendor']
+-    }),
++      name: 'common/manifest',
++      chunks: ['common/vendor']
++    })
+-    // copy custom static assets
+-    new CopyWebpackPlugin([
+-      {
+-        from: path.resolve(__dirname, '../static'),
+-        to: config.build.assetsSubDirectory,
+-        ignore: ['.*']
+-      }
+-    ])
+   ]
+ })
+```
+
+#### config/index.js
+
+```js
+ module.exports = {
+     env: require('./prod.env'),
+     index: path.resolve(__dirname, '../dist/index.html'),
+     assetsRoot: path.resolve(__dirname, '../dist'),
+-    assetsSubDirectory: 'static', // 不将资源聚合放在 static 目录下
++    assetsSubDirectory: '',
+     assetsPublicPath: '/',
+     productionSourceMap: false,
+     // Gzip off by default as many popular static hosts such as
+@@ -26,7 +26,7 @@ module.exports = {
+     port: 8080,
+     // 在小程序开发者工具中不需要自动打开浏览器
+     autoOpenBrowser: false,
+-    assetsSubDirectory: 'static', // 不将资源聚合放在 static 目录下
++    assetsSubDirectory: '',
+     assetsPublicPath: '/',
+     proxyTable: {},
+     // CSS Sourcemaps off by default because relative paths are "buggy"
+```
+
+#### package.json
+
+升级：
+"mpvue-loader": "^1.1.1-rc.4"
+"webpack-mpvue-asset-plugin": "^0.1.1"
+
+新增：
+"relative": "^3.0.2"
+
+#### src/main.js
+
+删除 config
+
+```js
+-export default {
+-  // 这个字段走 app.json
+-  config: {
+-    // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
+-    pages: ['pages/logs/main', '^pages/index/main'],
+-    window: {
+-      backgroundTextStyle: 'light',
+-      navigationBarBackgroundColor: '#fff',
+-      navigationBarTitleText: 'WeChat',
+-      navigationBarTextStyle: 'black'
+-    }
+-  }
+-}
+```
+
+#### src/main.json
+
+将原 js 中的 config 迁移到 main.json 文件中
+
+```js
++{
++  "pages": [
++    "pages/index/main",
++    "pages/counter/main",
++    "pages/logs/main"
++  ],
++  "window": {
++    "backgroundTextStyle": "light",
++    "navigationBarBackgroundColor": "#fff",
++    "navigationBarTitleText": "WeChat",
++    "navigationBarTextStyle": "black"
++  }
++}
+```

docs/change-log/index.md

@@ -0,0 +1,17 @@
+# Change log
+
+## 2018.7.30
+
+### mpvue-loader@1.1.2-rc4
+
+* 修复 slot 文件路径生成错误的问题
+
+## 2018.7.24
+
+### mpvue-loader@1.1.2-rc4
+
+* 解决 1.0.x 生成 css 和 js 路径为固定路径，影响分包的问题，此次升级为部分不兼容升级，升级帮助见 [升级帮助](./2018.7.24.md)
+
+### webpack-mpvue-asset-plugin@0.1.1
+
+* 解析依赖的资源路径，并自动引用。

docs/mpvue/quickstart.md

@@ -28,7 +28,7 @@ $ npm set registry https://registry.npm.taobao.org/
 
 # 3. 全局安装 vue-cli
 # 一般是要 sudo 权限的
-$ npm install --global vue-cli
+$ npm install --global vue-cli@2.9
 
 # 4. 创建一个基于 mpvue-quickstart 模板的新项目
 # 新手一路回车选择默认就可以了
@@ -71,6 +71,12 @@ $ npm run dev
 
 到此，上手完毕。
 
+## 4. 分包机制 `2018.7.23+`
+
+mpvue-loader 1.1.2-rc.2 之后，优化了 build 后的文件生成结构，生成的目录结构保持了源文件夹下的目录结构，有利于对分包的支持。
+
+## 5. webpack 配置
+
 ## 注意事项
 
 1. 新增的页面需要重新 `npm run dev` 来进行编译

mkdocs.yml

@@ -15,7 +15,10 @@ pages:
 - [build/postcss-mpvue-wxss.md, Build]
 - [build/px2rpx-loader.md, Build]
 - [build/mpvue-lint.md, Build]
+- [build/webpack-mpvue-asset-plugin.md, Build]
 - [qa.md, Q&A]
+- [change-log/index.md, Change log]
+- [change-log/2018.7.24.md, '']
 
 extra:
   css: 'assets/style.css'