vue.js - webpack1x cannot read property 'call' of undefined

问题描述

问 题

1.webpack1X cannot read property 'call' of undefined打完包浏览器就是这个错误
2.modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

3.Cannot read property 'call' of undefined

4.听说网上说typeof改成——isObject()能解决但是在哪改？并没有找到
5.还有说extract-text-webpack-plugin是这个插件的问题
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css'))
改写成
new ExtractTextPlugin({
filename:utils.assetsPath('css/[name].[contenthash].css')),
allChunks: true
})
但是编译不过去 总是提示path.replace is not a function

还有我用的webpack1X版本 1.13.2
extract-text-webpack-plugin用的是1.0.1 一直没找到问题怎么解决！谢谢

我的webpack配置代码
1.build.js
// https://github.com/shelljs/sh...
require('shelljs/global')
env.NODE_ENV = 'production'

var path = require('path')
var config = require('../config')
var ora = require('ora')
var webpack = require('webpack')
var webpackConfig = require('./webpack.prod.conf')

console.log(
' Tip:n' +
' Built files are meant to be served over an HTTP server.n' +
' Opening index.html over file:// won't work.n'
)

var spinner = ora('building for production...')
spinner.start()

var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory);
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
cp('-R', 'static/*', assetsPath)

webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({

colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false

}) + 'n')
})

2.utils.js
// node 原生path模块
var path = require('path')
// glob模块，用于读取webpack入口目录文件
var glob = require('glob');
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

exports.assetsPath = function (_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production'

? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory

return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
options = options || {}
// generate loader string to be used with extract text plugin
function generateLoaders (loaders) {

var sourceLoader = loaders.map(function (loader) {
  var extraParamChar
  if (/\?/.test(loader)) {
    loader = loader.replace(/\?/, '-loader?')
    extraParamChar = '&'
  } else {
    loader = loader + '-loader'
    extraParamChar = '?'
  }
  return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
}).join('!')

if (options.extract) {
  return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
} else {
  return ['vue-style-loader', sourceLoader].join('!')
}

}

return {

css: generateLoaders(['css']),
postcss: generateLoaders(['css']),
less: generateLoaders(['css', 'less']),
sass: generateLoaders(['css', 'sass?indentedSyntax']),
scss: generateLoaders(['css', 'sass']),
stylus: generateLoaders(['css', 'stylus']),
styl: generateLoaders(['css', 'stylus'])

}
}

exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {

var loader = loaders[extension]
output.push({
  test: new RegExp('\\.' + extension + '$'),
  loader: loader
})

}
return output
}

exports.getEntries = function (globPath) {
var entries = {}
/**

• 读取src目录,并进行路径裁剪
  */

glob.sync(globPath).forEach(function (entry) {

/**
 * path.basename 提取出用 ‘/' 隔开的path的最后一部分，除第一个参数外其余是需要过滤的字符串
 * path.extname 获取文件后缀
 */
// var basename = path.basename(entry, path.extname(entry), 'router.js') // 过滤router.js
// ***************begin***************
// 当然， 你也可以加上模块名称, 即输出如下： { module/main: './src/module/index/main.js', module/test: './src/module/test/test.js' }
// 最终编译输出的文件也在module目录下， 访问路径需要时 localhost:8080/module/index.html
// slice 从已有的数组中返回选定的元素, -3 倒序选择，即选择最后三个
var tmp = entry.split('/').splice(-3)
var moduleName = tmp.slice(1, 2);
// ***************end***************
entries[moduleName] = entry

});
// console.log(entries);
// 获取的主入口如下： { main: './src/module/index/main.js', test: './src/module/test/test.js' }
return entries;
}

3.webpack.base.conf.js
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')

module.exports = {
entry: utils.getEntries('./src/module/*/.js'),
output: {

path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'

},
resolve: {

extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
  'vue': 'vue/dist/vue.js',
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components')
}

},
resolveLoader: {

fallback: [path.join(__dirname, '../node_modules')]

},
module: {

loaders: [
  {
    test: /\.vue$/,
    loader: 'vue'
  },
  {
    test: /\.js$/,
    loader: 'babel',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.json$/,
    loader: 'json'
  },
  {
    test: /\.html$/,
    loader: 'vue-html'
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('images/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
]

},
vue: {

loaders: utils.cssLoaders()

}
}

4.webpack.prod.config.js
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: config.build.env

module.exports = merge(baseWebpackConfig, {
module: {

loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })

},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {

path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

},
vue: {

loaders: utils.cssLoaders({
  sourceMap: config.build.productionSourceMap,
  extract: true
})

},
plugins: [

new webpack.DefinePlugin({
  'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  }
}),
new webpack.optimize.OccurenceOrderPlugin(),
// extract css into its own file
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
// 公共模块的提取
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor', // 生成文件的名字
  minChunks: function (module, count) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
})

]
})

if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')

webpackConfig.plugins.push(

new CompressionWebpackPlugin({
  asset: '[path].gz[query]',
  algorithm: 'gzip',
  test: new RegExp(
    '\\.(' +
    config.build.productionGzipExtensions.join('|') +
    ')$'
  ),
  threshold: 10240,
  minRatio: 0.8
})

)
}

var pages = utils.getEntries('./src/module/*/.html')
for(var page in pages) {
// 配置生成的html文件，定义路径等
var conf = {

filename: page + '.html',
template: pages[page], //模板路径
inject: true,
// excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口
// 如何更好的理解这块呢？举个例子：比如本demo中包含两个模块（index和about），最好的当然是各个模块引入自己所需的js，
// 而不是每个页面都引入所有的js，你可以把下面这个excludeChunks去掉，然后npm run build，然后看编译出来的index.html和about.html就知道了
// filter：将数据过滤，然后返回符合要求的数据，Object.keys是获取JSON对象中的每个key
excludeChunks: Object.keys(pages).filter(item => {
  return (item != page)
})

}
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

5.config下面的index.js
// see http://vuejs-templates.github... for documentation.
var path = require('path')

module.exports = {
build: {

env: require('./prod.env'),
// index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css']

},
dev: {

env: require('./dev.env'),
port: 8080,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/m':{
    target: 'http://cs214.yixunapp.cn/',
    changeOrigin: true,
    pathRewrite:{
      '^/m': '/m'
    }
  },
  '/yixun-org':{
    target: 'http://cs214.yixunapp.cn/',
    changeOrigin: true,
    pathRewrite:{
      '^/yixun-org': '/yixun-org'
    }
  },
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false

}
}

我参考的是https://github.com/jarvan4dev...

解决方案

找到原因了 因为自己用了for of Object.keys导致的

这篇关于vue.js - webpack1x cannot read property 'call' of undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！