Webpack配置导致生成的js文件中__webpack_require__(3).Object为undefined报错?

运用Vue+Webpack在重构公司的一套系统,由于需要保证原业务和重构的并行开发,所以项目目录大致如下,组件化的内容先暂时都在assets文件夹里
图片描述

Webpack.config文件如下:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var webpack = require('webpack');
var debug = process.env.NODE_ENV !== 'prod';
var RootDir = process.cwd();

var config = {
  entry: {
    bundle:'./src/entry.js',
    market:'./src/market.js',
    vendor: ['vue','vue-router','vue-resource']
  },
  output: {
    path: __dirname + (debug?'/build/dev':'/build/public'),  // 指定某些loader 的输出路径(js/img)
    filename: debug?'js/[name].js':'js/[name].[chunkhash:8].min.js',
    publicPath: debug?'/assets/build/dev/':'/assets/build/public/',  // generate URL
    chunkFilename: debug?'chunks/[chunkhash:8].chunk.js':'chunks/[chunkhash:8].chunk.min.js'
  },
  resolve: {
    // 构建时,module 的查找路径
    root: [RootDir + '/src', RootDir + '/node_modules'],
    // 定义模块别名,缩短构建时路径搜索时间
    alias: {
      'vue':'vue/dist/'+(debug?'vue.js':'vue.min.js'),
      'vue-router':'vue-router/dist/'+(debug?'vue-router.js':'vue-router.min.js'),
      'vue-resource':'vue-resource/dist/'+(debug?'vue-resource.js':'vue-resource.min.js')
    },
    // 自动扩展的文件名后缀
    extensions: ['', '.js', '.css', '.scss', '.vue', '.png', '.jpg']
  },
  module: {
    loaders: [
      { // use vue-loader for *.vue files
        test: /\.vue$/,
        loader: 'vue'
      },
      { // use bable-loader for *.js files
        test: /\.js$/,
        loader: 'babel',
        query: {compact: false},
        exclude: /node_modules/      // regex
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        // loader: 'url',
        loaders: [
          /*'image?{bypassOnDebug: true, progressive:true, \
                optimizationLevel: 3, pngquant:{quality: "65-80"}}',*/
            'url?limit=10000&name=img/[hash:8].[name].[ext]'
        ]
        /*,
        query: {
          limit: 10000,
          //custom naming format if file is larger than the threshold
          name: '[name].[ext]?[hash]'
        }
        */
      }
    ],
    //不在扫描数组中每个正则所匹配的模块的依赖
    noParse:[/^vue$/,/^vue-router$/,/^vue-resource$/],
    //外部依赖,可以引用外部资源,例如CDN
    //externals:{'vue':true}
  },
  // bable config
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },

  // vue-loader config
  vue: {
    autoprefixer: {
      browsers: ['> 1%']
    },
    loaders: {
      css: ExtractTextPlugin.extract('css'),
      sass: ExtractTextPlugin.extract('css!sass'),
      js: 'babel!eslint'
    }
  },
  plugins: [
    //CSS提取为独立文件
    new ExtractTextPlugin(debug?'css/[name].style.css':'css/[name].style.[contenthash:8].min.css',{allChunks:true}),
    //避免重复的模块
    new webpack.optimize.DedupePlugin(),
    //将vender提取为公共模块
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      filename: debug?'js/vendor.js':'js/vendor.[chunkhash:8].min.js'
    }),
    //跟据模板生成html页面
    new HtmlWebpackPlugin({
      template: 'src/template/temp.php',
      filename: './../../../protected/views/layouts/weixin_layout.php',
      excludeChunks: ['market']
    }),
    new HtmlWebpackPlugin({
      title: '集市',
      template: 'src/template/markettemp.php',
      filename: './../../../protected/views/layouts/market_layout.php',
      excludeChunks: ['bundle']
    }),
    new webpack.ProvidePlugin({
      '_': 'lodash'
    })
  ]
}

if (!debug) {
  //压缩
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({compress:{warnings:false}})
  );
  //清空文件夹
  config.plugins.push(
    new CleanWebpackPlugin(['public'], {
      root: RootDir + '/build', // 根路径(绝对路径)
      verbose: true, // 控制台打印日志
      dry: false // 不清空任何文件,用于测试
    })
  );
  config.output.sourceMapFilename = '[file].map';
  config.devtool = 'source-map';
}

module.exports = config;

之后每次在assets文件夹里运行webpack --profile --display-error-details --colors --watch项目都能正常启动,但只要保存一下组件文件,刷新后页面就会报错
图片描述

报错内容为__webpack_require__(3).Object为undefined
图片描述

通过diff比对,主要是vendor.js发生了变化,但具体变化如下主要为require的数字重新生成,一些函数方法更换了顺序,结果导致了报错,想问一下为什么会这样。
图片描述

具体的diff比对文件由于较长,大家可以下载查看diff文件 求教,这是什么问题...

另外还想顺路问一下我的Webpack配置还有没有更好的优化方法。麻烦大家了,谢谢

阅读 9.7k
2 个回答

cache设置为false看看,watch没怎么用过,我每次都是重新编译的

我也遇到了这个问题,还记得是怎么解决的吗,兄弟

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进