mpvue.com

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

// 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 下面

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 一样

@@ -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

 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

-export default { - // 这个字段走 app.json - config: { - // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去 - pages: ['pages/logs/main', '^pages/index/main'], - window: { - backgroundTextStyle: 'light', - navigationBarBackgroundColor: '#fff', - navigationBarTitleText: 'WeChat', - navigationBarTextStyle: 'black' - } - } -}

src/app.json

将原 src/main.js 中的 config 迁移到 app.json 文件中（页面 JS 中的配置迁移到 main.json 中）

+{ + "pages": [ + "pages/index/main", + "pages/counter/main", + "pages/logs/main" + ], + "window": { + "backgroundTextStyle": "light", + "navigationBarBackgroundColor": "#fff", + "navigationBarTitleText": "WeChat", + "navigationBarTextStyle": "black" + } +}