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

[Jiiiiiin]

• 最近升级项目过程中，使用了vue-cli 2.9.2的webpack模板，准备将项目升级到webpack3，跟随官方的构建流程，出现以下问题：

• 先贴一下核心的一些依赖库：

  "scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "prod": "node build/prod-server.js",
  "lint": "eslint --ext .js,.vue src",
  "fix": "npm run lint --fix"
  },
  "dependencies": {
  "axios": "^0.17.1",
  "babel-runtime": "^6.26.0",
  "better-scroll": "^1.6.3",
  "element-ui": "^2.0.9",
  "fastclick": "^1.0.6",
  "vue": "^2.5.2",
  "vue-lazyload": "^1.1.4",
  "vue-navigation": "^1.1.3",
  "vue-router": "^3.0.1",
  "vue-viewplus": "^0.1.6",
  "vuerify": "^0.4.0",
  "vuex": "^3.0.1",
  "vux": "^2.7.6"
  },
  "devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.22.1",
  "babel-eslint": "^7.1.1",
  "babel-helper-vue-jsx-merge-props": "^2.0.3",
  "babel-loader": "^7.1.1",
  // ... 省略
  "ora": "^1.2.0",
  "portfinder": "^1.0.13",
  "postcss-import": "^11.0.0",
  "postcss-loader": "^2.0.8",
  "rimraf": "^2.6.0",
  "semver": "^5.3.0",
  "shelljs": "^0.7.6",
  "stylus": "^0.54.5",
  "stylus-loader": "^3.0.1",
  "uglifyjs-webpack-plugin": "^1.1.1",
  "url-loader": "^0.5.8",
  **"vue-loader": "^13.3.0",**
  "vue-style-loader": "^3.0.1",
  "vue-template-compiler": "^2.5.2",
  **"vux-loader": "^1.1.29",
  "webpack": "^3.6.0",**
  "webpack-bundle-analyzer": "^2.9.0",
  "webpack-dev-server": "^2.9.1",
  "webpack-merge": "^4.1.0"
  },

• 如果使用vux-loader在build之后：

• build/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 = { // module.exports = { 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' } }

const vuxLoader = require('vux-loader') const vuxConfig = require('./vux-config') module.exports = vuxLoader.merge(webpackConfig, vuxConfig)

- 运行在报错效果：
![jietu20171228-112623](https://user-images.githubusercontent.com/8840636/34399393-14b805d2-ebc2-11e7-8529-70c9cf5f27a1.jpg)
![jietu20171228-112740](https://user-images.githubusercontent.com/8840636/34399401-25215f22-ebc2-11e7-9b04-1ba88565e0e3.jpg)

+ 如果不使用vux-loader:
```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
  }
})

可以运行，但是.....

@airyland 老大赶紧的！！！ 

[Jiiiiiin]

问题已经解决，是我自己的疏漏，详见：

• airyland/vux#2354