Skip to content

Commit 92abb47

Browse files
aOrzaOrz
committed
docs: add change log
1 parent c54522c commit 92abb47

File tree

7 files changed

+309
-3
lines changed

7 files changed

+309
-3
lines changed

‎docs/build/mpvue-loader.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,16 @@ export default {
124124
这个部分的处理同 web 的处理差异不大，唯一不同在于通过配置生成 `.css` 为 `.wxss` ，其中的对于 css 的若干处理，在 [postcss-mpvue-wxss](/build/postcss-mpvue-wxss/) 和 [px2rpx-loader](/build/px2rpx-loader/) 这两部分的文档中又详细的介绍。
125125

126126
### app.json／page.json
127+
128+
`1.1.1 以上`
129+
130+
推荐和小程序一样，将 app.json／page.json 放到页面入口处，使用 copy-webpack-plugin copy 到对应的生成位置。
131+
132+
`1.1.1 以下`
133+
127134
这部分内容来源于 app 和 page 的 entry 文件，通常习惯是 main.js，你需要在你的入口文件中 `export default { config: {} }`，这才能被我们的 loader 识别为这是一个配置，需要写成 json 文件。
128-
``` javascript
135+
136+
```javascript
129137
import Vue from 'vue';
130138
import App from './app';
131139

‎docs/build/px2rpx-loader.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ Owl.start({
66
})
77
</script>
88

9-
109
# px2rpx-loader
1110

1211
同 [px2rem](https://github.com/songsiqi/px2rem) 一摸一样的用法，唯一的差异在于我们改变了部分内部实现，使其更好的展现在小程序中。

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# webpack-mpvue-plugin
2+
3+
> mpvue 资源路径解析插件
4+
5+
## 使用示例：
6+
7+
```js
8+
const MpvuePlugin = require('webpack-mpvue-asset-plugin')
9+
// webpack config
10+
{
11+
entry: [],
12+
output: {
13+
path: path.resolve(__dirname, 'dist'),
14+
filename: 'foo.bundle.js'
15+
},
16+
plugins: [
17+
new MpvuePlugin()
18+
]
19+
};
20+
```

‎docs/change-log/2018.7.24.md

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
## mpvue-loader@1.1.2-rc.4+ 升级指南
2+
3+
> 本次升级意在调整生成文件目录结构，对依赖的文件由原来的写死绝对路径该改为相对路径，1.1.x 版本还不是很稳定，对稳定性要求较高的项目建议暂时使用 1.0.x 版本
4+
5+
### 不兼容的地方
6+
7+
1. mpvue-loader@1.1.2-rc.4+ 依赖 webpack-mpvue-asset-plugin@0.1.1+ 做依赖资源引用
8+
2. 之前写在 main.js 中的 config 信息，需要在 main.js 同级目录下新建 main.json 文件，使用 webapck-copy-plugin copy 到 build 目录下
9+
10+
### 那些坑
11+
12+
1. app.json 中引用的图片不会自动 copy 到 dist 目录下
13+
json 配置文件是由 webapck-copy-plugin copy 过去的，不会处理依赖，可以将图片放到根目录下 static 目录下，使用 webapck-copy-plugin copy 过去
14+
15+
### webpack 配置配合升级指南
16+
17+
#### build/webpack.base.conf.js
18+
19+
```js
20+
// build/webpack.base.conf.js
21+
22+
+var CopyWebpackPlugin = require('copy-webpack-plugin')
23+
+var relative = require('relative')
24+
25+
function resolve (dir) {
26+
return path.join(__dirname, '..', dir)
27+
}
28+
29+
-function getEntry (rootSrc, pattern) {
30+
- var files = glob.sync(path.resolve(rootSrc, pattern))
31+
- return files.reduce((res, file) => {
32+
- var info = path.parse(file)
33+
- var key = info.dir.slice(rootSrc.length + 1) + '/' + info.name
34+
- res[key] = path.resolve(file)
35+
- return res
36+
- }, {})
37+
+function getEntry (rootSrc) {
38+
+ var map = {};
39+
+ glob.sync(rootSrc + '/pages/**/main.js')
40+
+ .forEach(file => {
41+
+ var key = relative(rootSrc, file).replace('.js', '');
42+
+ map[key] = file;
43+
+ })
44+
+ return map;
45+
}
46+
47+
const appEntry = { app: resolve('./src/main.js') }
48+
const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
49+
const entry = Object.assign({}, appEntry, pagesEntry)
50+
51+
@@ -108,6 +122,14 @@ module.exports = {
52+
]
53+
},
54+
plugins: [
55+
- new MpvuePlugin()
56+
+ new MpvuePlugin(),
57+
+ new CopyWebpackPlugin([{
58+
+ from: '**/*.json',
59+
+ to: ''
60+
+ }], {
61+
+ context: 'src/'
62+
+ })
63+
+ new CopyWebpackPlugin([ // 处理 main.json 里面引用的图片，不要放代码中引用的图片
64+
+ {
65+
+ from: path.resolve(__dirname, '../static'),
66+
+ to: path.resolve(__dirname, '../dist/static'),
67+
+ ignore: ['.*']
68+
+ }
69+
+ ])
70+
]
71+
}
72+
```
73+
74+
#### build/webpack.dev.conf.js
75+
76+
修改生成文件的路径，让生成的文件路径可以放在原来的 page 下面
77+
78+
```js
79+
module.exports = merge(baseWebpackConfig, {
80+
devtool: '#source-map',
81+
output: {
82+
path: config.build.assetsRoot,
83+
- filename: utils.assetsPath('js/[name].js'),
84+
- chunkFilename: utils.assetsPath('js/[id].js')
85+
+ filename: utils.assetsPath('[name].js'),
86+
+ chunkFilename: utils.assetsPath('[id].js')
87+
},
88+
plugins: [
89+
new webpack.DefinePlugin({
90+
@@ -42,8 +42,8 @@ module.exports = merge(baseWebpackConfig, {
91+
// copy from ./webpack.prod.conf.js
92+
// extract css into its own file
93+
new ExtractTextPlugin({
94+
- filename: utils.assetsPath('css/[name].wxss')
95+
+ filename: utils.assetsPath('[name].wxss')
96+
}),
97+
@@ -53,7 +53,7 @@ module.exports = merge(baseWebpackConfig, {
98+
}
99+
}),
100+
new webpack.optimize.CommonsChunkPlugin({
101+
- name: 'vendor',
102+
+ name: 'common/vendor',
103+
minChunks: function (module, count) {
104+
// any required modules inside node_modules are extracted to vendor
105+
return (
106+
@@ -64,17 +64,9 @@ module.exports = merge(baseWebpackConfig, {
107+
}
108+
}),
109+
new webpack.optimize.CommonsChunkPlugin({
110+
- name: 'manifest',
111+
- chunks: ['vendor']
112+
+ name: 'common/manifest',
113+
+ chunks: ['common/vendor']
114+
}),
115+
- // copy custom static assets
116+
- new CopyWebpackPlugin([
117+
- {
118+
- from: path.resolve(__dirname, '../static'),
119+
- to: config.build.assetsSubDirectory,
120+
- ignore: ['.*']
121+
- }
122+
- ]),
123+
```
124+
125+
#### build/webpack.prod.conf.js
126+
127+
同 build/webpack.dev.conf.js 一样
128+
129+
```js
130+
@@ -24,10 +24,10 @@ var webpackConfig = merge(baseWebpackConfig, {
131+
devtool: config.build.productionSourceMap ? '#source-map' : false,
132+
output: {
133+
path: config.build.assetsRoot,
134+
- filename: utils.assetsPath('js/[name].js'),
135+
- chunkFilename: utils.assetsPath('js/[id].js')
136+
+ filename: utils.assetsPath('[name].js'),
137+
+ chunkFilename: utils.assetsPath('[id].js')
138+
},
139+
plugins: [
140+
// http://vuejs.github.io/vue-loader/en/workflow/production.html
141+
@@ -39,8 +39,8 @@ var webpackConfig = merge(baseWebpackConfig, {
142+
}),
143+
// extract css into its own file
144+
new ExtractTextPlugin({
145+
- // filename: utils.assetsPath('css/[name].[contenthash].css')
146+
- filename: utils.assetsPath('css/[name].wxss')
147+
+ // filename: utils.assetsPath('[name].[contenthash].css')
148+
+ filename: utils.assetsPath('[name].wxss')
149+
}),
150+
// Compress extracted CSS. We are using this plugin so that possible
151+
// duplicated CSS from different components can be deduped.
152+
@@ -72,7 +72,7 @@ var webpackConfig = merge(baseWebpackConfig, {
153+
new webpack.HashedModuleIdsPlugin(),
154+
// split vendor js into its own file
155+
new webpack.optimize.CommonsChunkPlugin({
156+
- name: 'vendor',
157+
+ name: 'common/vendor',
158+
minChunks: function (module, count) {
159+
// any required modules inside node_modules are extracted to vendor
160+
return (
161+
@@ -85,17 +85,9 @@ var webpackConfig = merge(baseWebpackConfig, {
162+
// extract webpack runtime and module manifest to its own file in order to
163+
// prevent vendor hash from being updated whenever app bundle is updated
164+
new webpack.optimize.CommonsChunkPlugin({
165+
- name: 'manifest',
166+
- chunks: ['vendor']
167+
- }),
168+
+ name: 'common/manifest',
169+
+ chunks: ['common/vendor']
170+
+ })
171+
- // copy custom static assets
172+
- new CopyWebpackPlugin([
173+
- {
174+
- from: path.resolve(__dirname, '../static'),
175+
- to: config.build.assetsSubDirectory,
176+
- ignore: ['.*']
177+
- }
178+
- ])
179+
]
180+
})
181+
```
182+
183+
#### config/index.js
184+
185+
```js
186+
module.exports = {
187+
env: require('./prod.env'),
188+
index: path.resolve(__dirname, '../dist/index.html'),
189+
assetsRoot: path.resolve(__dirname, '../dist'),
190+
- assetsSubDirectory: 'static', // 不将资源聚合放在 static 目录下
191+
+ assetsSubDirectory: '',
192+
assetsPublicPath: '/',
193+
productionSourceMap: false,
194+
// Gzip off by default as many popular static hosts such as
195+
@@ -26,7 +26,7 @@ module.exports = {
196+
port: 8080,
197+
// 在小程序开发者工具中不需要自动打开浏览器
198+
autoOpenBrowser: false,
199+
- assetsSubDirectory: 'static', // 不将资源聚合放在 static 目录下
200+
+ assetsSubDirectory: '',
201+
assetsPublicPath: '/',
202+
proxyTable: {},
203+
// CSS Sourcemaps off by default because relative paths are "buggy"
204+
```
205+
206+
#### package.json
207+
208+
升级：
209+
"mpvue-loader": "^1.1.1-rc.4"
210+
"webpack-mpvue-asset-plugin": "^0.1.1"
211+
212+
新增：
213+
"relative": "^3.0.2"
214+
215+
#### src/main.js
216+
217+
删除 config
218+
219+
```js
220+
-export default {
221+
- // 这个字段走 app.json
222+
- config: {
223+
- // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
224+
- pages: ['pages/logs/main', '^pages/index/main'],
225+
- window: {
226+
- backgroundTextStyle: 'light',
227+
- navigationBarBackgroundColor: '#fff',
228+
- navigationBarTitleText: 'WeChat',
229+
- navigationBarTextStyle: 'black'
230+
- }
231+
- }
232+
-}
233+
```
234+
235+
#### src/main.json
236+
237+
将原 js 中的 config 迁移到 main.json 文件中
238+
239+
```js
240+
+{
241+
+ "pages": [
242+
+ "pages/index/main",
243+
+ "pages/counter/main",
244+
+ "pages/logs/main"
245+
+ ],
246+
+ "window": {
247+
+ "backgroundTextStyle": "light",
248+
+ "navigationBarBackgroundColor": "#fff",
249+
+ "navigationBarTitleText": "WeChat",
250+
+ "navigationBarTextStyle": "black"
251+
+ }
252+
+}
253+
```

‎docs/change-log/index.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Change log
2+
3+
## 2018.7.30
4+
5+
### mpvue-loader@1.1.2-rc4
6+
7+
* 修复 slot 文件路径生成错误的问题
8+
9+
## 2018.7.24
10+
11+
### mpvue-loader@1.1.2-rc4
12+
13+
* 解决 1.0.x 生成 css 和 js 路径为固定路径，影响分包的问题，此次升级为部分不兼容升级，升级帮助见 [升级帮助](./2018.7.24.md)
14+
15+
### webpack-mpvue-asset-plugin@0.1.1
16+
17+
* 解析依赖的资源路径，并自动引用。

‎docs/mpvue/quickstart.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ $ npm set registry https://registry.npm.taobao.org/
2828

2929
# 3. 全局安装 vue-cli
3030
# 一般是要 sudo 权限的
31-
$ npm install --global vue-cli
31+
$ npm install --global vue-cli@2.9
3232

3333
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
3434
# 新手一路回车选择默认就可以了
@@ -71,6 +71,12 @@ $ npm run dev
7171

7272
到此，上手完毕。
7373

74+
## 4. 分包机制 `2018.7.23+`
75+
76+
mpvue-loader 1.1.2-rc.2 之后，优化了 build 后的文件生成结构，生成的目录结构保持了源文件夹下的目录结构，有利于对分包的支持。
77+
78+
## 5. webpack 配置
79+
7480
## 注意事项
7581

7682
1. 新增的页面需要重新 `npm run dev` 来进行编译

‎mkdocs.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ pages:
1515
- [build/postcss-mpvue-wxss.md, Build]
1616
- [build/px2rpx-loader.md, Build]
1717
- [build/mpvue-lint.md, Build]
18+
- [build/webpack-mpvue-asset-plugin.md, Build]
1819
- [qa.md, Q&A]
20+
- [change-log/index.md, Change log]
21+
- [change-log/2018.7.24.md, '']
1922

2023
extra:
2124
css: 'assets/style.css'

0 commit comments

Comments
 (0)