Vux: 针对vue-cli新版webpack模板初始化项目的问题

Created on 28 Dec 2017 · 10Comments · Source: airyland/vux

最近升级项目过程中，使用了vue-cli 2.9.2的webpack模板，准备将项目升级到webpack3，跟随官方的构建流程，问题已经反映到姊妹项目的issue列表：

airyland/vux-loader#47

@airyland :smile: 老大！！！

Source

Jiiiiiin

Most helpful comment

能否去除业务代码后，建一个能重现的repo，上传至GitHub

wg5945 on 28 Dec 2017

❤1 👍1

All 10 comments

2310 这是同个问题吧，降级 vue-loader 到 13.3.0 使用。

airyland on 28 Dec 2017

@airyland 降级了还是一样的问题。

Jiiiiiin on 28 Dec 2017

建个简单的 repo。

airyland on 28 Dec 2017

😕1 👍1

降级vue-loader:

diff --git a/package.json b/package.json
index b3f6bb9..c090716 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "stylus-loader": "^3.0.1",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
-    "vue-loader": "^13.6.1",
+    "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
     "vux-loader": "^1.1.29",
(END)

开发模式正常
打包之后，还是存在airyland/vux-loader#47出现的问题：
贴出配置 webpack.base.conf.js：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

const webpackConfig = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      '@assets': resolve('src/assets'),
      '@api': resolve('src/api'),
      '@transcode-types': resolve('src/api/transcode-types.js'),
      '@mutation-types': resolve('src/store/mutation-types.js'),
      '@styl': resolve('src/assets/styl'),
      '@comp': resolve('src/components'),
      '@ccomp': resolve('src/base/comm'),
      '@bcomp': resolve('src/base/business'),
      '@model': resolve('src/model'),
      '@store': resolve('src/store')
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

// TODO vux-loader 对新版本webpack模板项目支持存在问题：详见对应issue#47
// if (process.env.NODE_ENV === 'production') {
//   module.exports = webpackConfig
// } else {
  const vuxLoader = require('vux-loader')
  const vuxConfig = require('./vux-config')
  module.exports = vuxLoader.merge(webpackConfig, vuxConfig)
// }

贴出配置 vux-conf.js：

'use strict'

module.exports = {
  options: {
    env: 'dev'
  },
  plugins: [
    'vux-ui', 'inline-manifest',
    {
      name: 'duplicate-style',
      envs: ['production']
    },
    {
      name: 'progress-bar',
      envs: ['development']
    },
    {
      name: 'less-theme',
      path: 'src/assets/vux/vux-theme.less'
    }
  ]
}

现在的问题是不单单是报出：VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。这句话的问题，而是上到生产服务器直接跑步起来的问题

@airyland

Jiiiiiin on 28 Dec 2017

@airyland 老大你指的建repo的意思是？之前没有提过，请指点？是让我建一个能复现问题的在线代码厂库么？:stuck_out_tongue:

Jiiiiiin on 28 Dec 2017

能否去除业务代码后，建一个能重现的repo，上传至GitHub

wg5945 on 28 Dec 2017

❤1 👍1

@wg5945 好的我弄好提上来！！！

Jiiiiiin on 28 Dec 2017