diff --git a/docs/build/mpvue-loader.md b/docs/build/mpvue-loader.md index 398fab0..0b0ac45 100644 --- a/docs/build/mpvue-loader.md +++ b/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'; diff --git a/docs/build/px2rpx-loader.md b/docs/build/px2rpx-loader.md index 4b94bc6..1caade8 100644 --- a/docs/build/px2rpx-loader.md +++ b/docs/build/px2rpx-loader.md @@ -6,7 +6,6 @@ Owl.start({ }) - # px2rpx-loader 同 [px2rem](https://github.com/songsiqi/px2rem) 一摸一样的用法,唯一的差异在于我们改变了部分内部实现,使其更好的展现在小程序中。 \ No newline at end of file diff --git a/docs/build/webpack-mpvue-asset-plugin.md b/docs/build/webpack-mpvue-asset-plugin.md new file mode 100644 index 0000000..acae6d4 --- /dev/null +++ b/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() + ] +}; +``` \ No newline at end of file diff --git a/docs/change-log/2018.7.24.md b/docs/change-log/2018.7.24.md new file mode 100644 index 0000000..0cafd46 --- /dev/null +++ b/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" ++ } ++} +``` \ No newline at end of file diff --git a/docs/change-log/index.md b/docs/change-log/index.md new file mode 100644 index 0000000..3f19f01 --- /dev/null +++ b/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 + +* 解析依赖的资源路径,并自动引用。 \ No newline at end of file diff --git a/docs/mpvue/quickstart.md b/docs/mpvue/quickstart.md index 754d0bb..b5e5b41 100644 --- a/docs/mpvue/quickstart.md +++ b/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` 来进行编译 diff --git a/mkdocs.yml b/mkdocs.yml index 7f39e9f..f4e0817 100644 --- a/mkdocs.yml +++ b/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' \ No newline at end of file