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

  1. // build/webpack.base.conf.js
  3. +var CopyWebpackPlugin = require('copy-webpack-plugin')
  4. +var relative = require('relative')
  6.  function resolve (dir) {
  7.    return path.join(__dirname, '..', dir)
  8.  }
  10. -function getEntry (rootSrc, pattern) {
  11. -  var files = glob.sync(path.resolve(rootSrc, pattern))
  12. -  return files.reduce((res, file) => {
  13. -    var info = path.parse(file)
  14. -    var key = info.dir.slice(rootSrc.length + 1) + '/' + info.name
  15. -    res[key] = path.resolve(file)
  16. -    return res
  17. -  }, {})
  18. +function getEntry (rootSrc) {
  19. +  var map = {};
  20. +  glob.sync(rootSrc + '/pages/**/main.js')
  21. +  .forEach(file => {
  22. +    var key = relative(rootSrc, file).replace('.js', '');
  23. +    map[key] = file;
  24. +  })
  25. +   return map;
  26.  }
  28. const appEntry = { app: resolve('./src/main.js') }
  29.  const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
  30.  const entry = Object.assign({}, appEntry, pagesEntry)
  32. @@ -108,6 +122,14 @@ module.exports = {
  33.      ]
  34.    },
  35.    plugins: [
  36. -    new MpvuePlugin()
  37. +    new MpvuePlugin(),
  38. +    new CopyWebpackPlugin([{
  39. +      from: '**/*.json',
  40. +      to: ''
  41. +    }], {
  42. +      context: 'src/'
  43. +    })
  44. +    new CopyWebpackPlugin([ // 处理 main.json 里面引用的图片，不要放代码中引用的图片
  45. +      {
  46. +        from: path.resolve(__dirname, '../static'),
  47. +        to: path.resolve(__dirname, '../dist/static'),
  48. +        ignore: ['.*']
  49. +      }
  50. +    ])
  51.    ]
  52.  }

build/webpack.dev.conf.js

修改生成文件的路径，让生成的文件路径可以放在原来的 page 下面

  1. module.exports = merge(baseWebpackConfig, {
  2.    devtool: '#source-map',
  3.    output: {
  4.      path: config.build.assetsRoot,
  5. -    filename: utils.assetsPath('js/[name].js'),
  6. -    chunkFilename: utils.assetsPath('js/[id].js')
  7. +    filename: utils.assetsPath('[name].js'),
  8. +    chunkFilename: utils.assetsPath('[id].js')
  9.    },
  10.    plugins: [
  11.      new webpack.DefinePlugin({
  12. @@ -42,8 +42,8 @@ module.exports = merge(baseWebpackConfig, {
  13.      // copy from ./webpack.prod.conf.js
  14.      // extract css into its own file
  15.      new ExtractTextPlugin({
  16. -      filename: utils.assetsPath('css/[name].wxss')
  17. +      filename: utils.assetsPath('[name].wxss')
  18.      }),
  19. @@ -53,7 +53,7 @@ module.exports = merge(baseWebpackConfig, {
  20.        }
  21.      }),
  22.      new webpack.optimize.CommonsChunkPlugin({
  23. -      name: 'vendor',
  24. +      name: 'common/vendor',
  25.        minChunks: function (module, count) {
  26.          // any required modules inside node_modules are extracted to vendor
  27.          return (
  28. @@ -64,17 +64,9 @@ module.exports = merge(baseWebpackConfig, {
  29.        }
  30.      }),
  31.      new webpack.optimize.CommonsChunkPlugin({
  32. -      name: 'manifest',
  33. -      chunks: ['vendor']
  34. +      name: 'common/manifest',
  35. +      chunks: ['common/vendor']
  36.      }),
  37. -    // copy custom static assets
  38. -    new CopyWebpackPlugin([
  39. -      {
  40. -        from: path.resolve(__dirname, '../static'),
  41. -        to: config.build.assetsSubDirectory,
  42. -        ignore: ['.*']
  43. -      }
  44. -    ]),

build/webpack.prod.conf.js

同 build/webpack.dev.conf.js 一样

  1. @@ -24,10 +24,10 @@ var webpackConfig = merge(baseWebpackConfig, {
  2.    devtool: config.build.productionSourceMap ? '#source-map' : false,
  3.    output: {
  4.      path: config.build.assetsRoot,
  5. -    filename: utils.assetsPath('js/[name].js'),
  6. -    chunkFilename: utils.assetsPath('js/[id].js')
  7. +    filename: utils.assetsPath('[name].js'),
  8. +    chunkFilename: utils.assetsPath('[id].js')
  9.    },
  10.    plugins: [
  11.      // http://vuejs.github.io/vue-loader/en/workflow/production.html
  12. @@ -39,8 +39,8 @@ var webpackConfig = merge(baseWebpackConfig, {
  13.      }),
  14.      // extract css into its own file
  15.      new ExtractTextPlugin({
  16. -      // filename: utils.assetsPath('css/[name].[contenthash].css')
  17. -      filename: utils.assetsPath('css/[name].wxss')
  18. +      // filename: utils.assetsPath('[name].[contenthash].css')
  19. +      filename: utils.assetsPath('[name].wxss')
  20.      }),
  21.      // Compress extracted CSS. We are using this plugin so that possible
  22.      // duplicated CSS from different components can be deduped.
  23. @@ -72,7 +72,7 @@ var webpackConfig = merge(baseWebpackConfig, {
  24.      new webpack.HashedModuleIdsPlugin(),
  25.      // split vendor js into its own file
  26.      new webpack.optimize.CommonsChunkPlugin({
  27. -      name: 'vendor',
  28. +      name: 'common/vendor',
  29.        minChunks: function (module, count) {
  30.          // any required modules inside node_modules are extracted to vendor
  31.          return (
  32. @@ -85,17 +85,9 @@ var webpackConfig = merge(baseWebpackConfig, {
  33.      // extract webpack runtime and module manifest to its own file in order to
  34.      // prevent vendor hash from being updated whenever app bundle is updated
  35.      new webpack.optimize.CommonsChunkPlugin({
  36. -      name: 'manifest',
  37. -      chunks: ['vendor']
  38. -    }),
  39. +      name: 'common/manifest',
  40. +      chunks: ['common/vendor']
  41. +    })
  42. -    // copy custom static assets
  43. -    new CopyWebpackPlugin([
  44. -      {
  45. -        from: path.resolve(__dirname, '../static'),
  46. -        to: config.build.assetsSubDirectory,
  47. -        ignore: ['.*']
  48. -      }
  49. -    ])
  50.    ]
  51.  })

config/index.js

  1.  module.exports = {
  2.      env: require('./prod.env'),
  3.      index: path.resolve(__dirname, '../dist/index.html'),
  4.      assetsRoot: path.resolve(__dirname, '../dist'),
  5. -    assetsSubDirectory: 'static', // 不将资源聚合放在 static 目录下
  6. +    assetsSubDirectory: '',
  7.      assetsPublicPath: '/',
  8.      productionSourceMap: false,
  9.      // Gzip off by default as many popular static hosts such as
  10. @@ -26,7 +26,7 @@ module.exports = {
  11.      port: 8080,
  12.      // 在小程序开发者工具中不需要自动打开浏览器
  13.      autoOpenBrowser: false,
  14. -    assetsSubDirectory: 'static', // 不将资源聚合放在 static 目录下
  15. +    assetsSubDirectory: '',
  16.      assetsPublicPath: '/',
  17.      proxyTable: {},
  18.      // 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

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

src/app.json

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

  1. +{
  2. +  "pages": [
  3. +    "pages/index/main",
  4. +    "pages/counter/main",
  5. +    "pages/logs/main"
  6. +  ],
  7. +  "window": {
  8. +    "backgroundTextStyle": "light",
  9. +    "navigationBarBackgroundColor": "#fff",
  10. +    "navigationBarTitleText": "WeChat",
  11. +    "navigationBarTextStyle": "black"
  12. +  }
  13. +}