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

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. +}