在尝试升级Vue应用程序以使用Webpack 4时，我遇到了一个我不明白的错误。
以下是我的webpack基本配置的样子;
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
optimization: {
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
},
concatenateModules: true
},
mode: 'production',
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
//chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const 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
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
我已将生产文件编辑为这样。
ERROR in chunk app [entry]
static/js/[name].[chunkhash].js
Unexpected token (5:44)
|
| var REDIRECT = 'redirect_url';
| var TIMEOUT = Object({"GJS_DEBUG_TOPICS":JS ERROR;JS LOG,"npm_config_cache_lock_stale":60000,"npm_config_ham_it_up":,"npm_package_devDependencies_babel_core":6.26.0,"npm_package_devDependencies_chalk":2.3.2,"npm_package_devDependencies_postcss_url":7.3.1,"npm_config_legacy_bundling":,"npm_config_sign_git_tag":,"USER":jioke,"LANGUAGE":en_NG:en,"npm_package_devDependencies_jest":22.4.2,"npm_package_devDependencies_vue_loader":14.2.1,"npm_package_devDependencies_webpack_bundle_analyzer":2.11.1,"npm_package_devDependencies_webpack_cli":2.0.10,"npm_config_user_agent":npm/5.7.1 node/v8.9.4 linux x64,"npm_config_always_auth":,"TEXTDOMAIN":im-config,"XDG_SEAT":seat0,"npm_package_dependencies_vue":2.5.13,"npm_package_devDependencies_optimize_css_assets_webpack_plugin":4.0.0,"npm_package_devDependencies_ora":2.0.0,"npm_config_bin_links":true,"npm_config_key":,"SSH_AGENT_PID":1688,"XDG_SESSION_TYPE":x11,"npm_package_devDependencies_eslint_plugin_node":6.0.1,"npm_package_devDependencies_file_loader":1.1.11,"npm_package_devDependencies_vue_jest":2.1.1,"npm_config_allow_same_version":,"npm_config_description":true,"npm_config_fetch_retries":2,"npm_config_heading":npm,"npm_config_if_present":,"npm_config_init_version":1.0.0,"npm_config_user":1000,"npm_node_execpath":/home/jioke/.nodenv/versions/8.9.4/bin/node,"SHLVL":1,"npm_package_devDependencies_url_loader":1.0.1,"npm_config_prefer_online":,"LESS":-R,"NODENV_HOOK_PATH":/home/jioke/.nodenv/nodenv.d:/usr/local/etc/nodenv.d:/etc/nodenv.d:/usr/lib/nodenv/hooks,"QT4_IM_MODULE":xim,"HOME":/home/jioke,"npm_package_devDependencies_babel_plugin_dynamic_import_node":1.2.0,"npm_config_force":,"DESKTOP_SESSION":ubuntu,"npm_config_only":,"npm_config_read_only":,"ZSH":/home/jioke/.oh-my-zsh,"LSCOLORS":Gxfxcxdxbxegedabagacad,"npm_package_engines_node":>= 8.9.4,"npm_config_cache_min":10,"npm_config_init_license":ISC,"GNOME_SHELL_SESSION_MODE":ubuntu,"PAGER":less,"GTK_MODULES":gail:atk-bridge,"XDG_SEAT_PATH":/org/freedesktop/DisplayManager/Seat0,"npm_package_devDependencies_eslint_loader":2.0.0,"npm_package_devDependencies_node_notifier":5.2.1,"npm_package_devDependencies_shelljs":0.8.1,"npm_config_editor":vi,"npm_config_rollback":true,"npm_config_tag_version_prefix":v,"LC_CTYPE":en_NG,"npm_package_devDependencies_rimraf":2.6.2,"npm_config_cache_max":Infinity,"npm_config_timing":,"npm_config_userconfig":/home/jioke/.npmrc,"NODENV_VERSION":8.9.4,"DBUS_SESSION_BUS_ADDRESS":unix:path=/run/user/1000/bus,"npm_package_dependencies_dotenv":5.0.1,"npm_package_dependencies_moment":2.21.0,"npm_package_devDependencies_jest_serializer_vue":0.3.0,"npm_config_engine_strict":,"npm_config_init_author_name":,"npm_config_init_author_url":,"npm_config_tmp":/tmp,"COLORTERM":truecolor,"LIBVIRT_DEFAULT_URI":qemu:///system,"npm_package_description":A Kudy.io User Interface Design Project,"npm_package_dependencies_vue_session":1.0.0,"npm_package_devDependencies_babel_loader":7.1.4,"npm_config_depth":Infinity,"npm_config_package_lock_only":,"npm_config_save_dev":,"npm_config_usage":,"npm_package_devDependencies_nightwatch":0.9.20,"npm_package_readmeFilename":README.md,"npm_config_metrics_registry":https://registry.npmjs.org/,"npm_config_cafile":,"npm_config_otp":,"npm_config_package_lock":true,"npm_config_progress":true,"npm_config_https_proxy":,"npm_config_save_prod":,"MANDATORY_PATH":/usr/share/gconf/ubuntu.mandatory.path,"IM_CONFIG_PHASE":2,"npm_package_scripts_dev":webpack-dev-server --mode development --inline --progress --config build/webpack.dev.conf.js,"npm_package_devDependencies_babel_jest":22.4.1,"npm_config_cidr":,"npm_config_onload_script":,"npm_config_sso_type":oauth,"LOGNAME":jioke,"GTK_IM_MODULE":ibus,"npm_package_dependencies_request":2.83.0,"npm_package_devDependencies_eslint_plugin_import":2.9.0,"npm_package_devDependencies_vue_template_compiler":2.5.13,"npm_config_rebuild_bundle":true,"npm_config_save_bundle":,"npm_config_shell":/usr/bin/zsh,"WINDOWID":44040198,"npm_package_private":true,"npm_package_devDependencies_autoprefixer":8.1.0,"npm_package_devDependencies_babel_register":6.26.0,"npm_config_dry_run":,"npm_config_prefix":/home/jioke/.nodenv/versions/8.9.4,"DEFAULTS_PATH":/usr/share/gconf/ubuntu.default.path,"npm_package_scripts_lint":eslint --ext .js,.vue src test/unit test/e2e/specs,"npm_package_devDependencies_eslint_import_resolver_webpack":0.8.4,"npm_package_devDependencies_postcss_import":11.1.0,"npm_config_scope":,"npm_config_browser":,"npm_config_cache_lock_wait":10000,"npm_config_ignore_prepublish":,"npm_config_registry":https://registry.npmjs.org/,"npm_config_save_optional":,"npm_config_searchopts":,"npm_config_versions":,"XDG_SESSION_ID":c2,"TERM":xterm-256color,"npm_package_dependencies_path":0.12.7,"npm_package_devDependencies_selenium_server":3.10.0,"npm_config_cache":/home/jioke/.npm,"npm_config_proxy":,"npm_config_send_metrics":,"RBENV_SHELL":zsh,"NODENV_ROOT":/home/jioke/.nodenv,"GNOME_DESKTOP_SESSION_ID":this-is-deprecated,"npm_package_scripts_start":npm run dev,"npm_package_devDependencies_babel_plugin_transform_es2015_modules_commonjs":6.26.0,"npm_package_devDependencies_html_webpack_plugin":3.0.6,"npm_config_global_style":,"npm_config_ignore_scripts":,"npm_config_version":,"GTK2_MODULES":overlay-scrollbar,"npm_package_author_email":engineering@altalabs.io,"npm_package_dependencies_axios":0.18.0,"npm_package_dependencies_dotenv_webpack":1.5.5,"npm_package_devDependencies_postcss_loader":2.1.1,"npm_config_local_address":,"npm_config_viewer":man,"npm_config_node_gyp":/home/jioke/.nodenv/versions/8.9.4/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js,"PATH":/home/jioke/.nodenv/versions/8.9.4/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/jioke/lab/altalabs/ui/node_modules/.bin:/home/jioke/.nodenv/versions/8.9.4/bin:/home/jioke/.nodenv/libexec:/home/jioke/.nodenv/plugins/nodenv-update/bin:/home/jioke/.nodenv/plugins/node-build/bin:/home/jioke/.yarn/bin:/home/jioke/.config/yarn/global/node_modules/.bin:/home/jioke/.nodenv/shims:/home/jioke/.nodenv/bin:/home/jioke/.rbenv/plugins/ruby-build/bin:/home/jioke/.rbenv/shims:/home/jioke/.rbenv/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin,"GDM_LANG":en_US,"SESSION_MANAGER":local/jioke-K53E:@/tmp/.ICE-unix/1550,unix/jioke-K53E:/tmp/.ICE-unix/1550,"npm_package_name":kudyio,"npm_config_prefer_offline":,"NODE":/home/jioke/.nodenv/versions/8.9.4/bin/node,"XDG_MENU_PREFIX":gnome-,"S_COLORS":auto,"XDG_RUNTIME_DIR":/run/user/1000,"XDG_SESSION_PATH":/org/freedesktop/DisplayManager/Session0,"npm_package_devDependencies_eslint_config_airbnb_base":12.1.0,"npm_config_color":true,"DISPLAY"::0,"npm_package_devDependencies_webpack_merge":4.1.2,"npm_config_fetch_retry_mintimeout":10000,"npm_config_maxsockets":50,"npm_config_offline":,"npm_config_sso_poll_frequency":500,"LANG":en_NG,"XDG_CURRENT_DESKTOP":ubuntu:GNOME,"npm_package_devDependencies_eslint":4.18.2,"npm_package_devDependencies_webpack":4.1.1,"npm_config_umask":0022,"LS_COLORS":rs=0:di=01;34:ln=01;36:mh=00:pi=40;33:so=01;35:do=01;35:bd=40;33;01:cd=40;33;01:or=40;31;01:mi=00:su=37;41:sg=30;43:ca=30;41:tw=30;42:ow=34;42:st=37;44:ex=01;32:*.tar=01;31:*.tgz=01;31:*.arc=01;31:*.arj=01;31:*.taz=01;31:*.lha=01;31:*.lz4=01;31:*.lzh=01;31:*.lzma=01;31:*.tlz=01;31:*.txz=01;31:*.tzo=01;31:*.t7z=01;31:*.zip=01;31:*.z=01;31:*.Z=01;31:*.dz=01;31:*.gz=01;31:*.lrz=01;31:*.lz=01;31:*.lzo=01;31:*.xz=01;31:*.zst=01;31:*.tzst=01;31:*.bz2=01;31:*.bz=01;31:*.tbz=01;31:*.tbz2=01;31:*.tz=01;31:*.deb=01;31:*.rpm=01;31:*.jar=01;31:*.war=01;31:*.ear=01;31:*.sar=01;31:*.rar=01;31:*.alz=01;31:*.ace=01;31:*.zoo=01;31:*.cpio=01;31:*.7z=01;31:*.rz=01;31:*.cab=01;31:*.jpg=01;35:*.jpeg=01;35:*.mjpg=01;35:*.mjpeg=01;35:*.gif=01;35:*.bmp=01;35:*.pbm=01;35:*.pgm=01;35:*.ppm=01;35:*.tga=01;35:*.xbm=01;35:*.xpm=01;35:*.tif=01;35:*.tiff=01;35:*.png=01;35:*.svg=01;35:*.svgz=01;35:*.mng=01;35:*.pcx=01;35:*.mov=01;35:*.mpg=01;35:*.mpeg=01;35:*.m2v=01;35:*.mkv=01;35:*.webm=01;35:*.ogm=01;35:*.mp4=01;35:*.m4v=01;35:*.mp4v=01;35:*.vob=01;35:*.qt=01;35:*.nuv=01;35:*.wmv=01;35:*.asf=01;35:*.rm=01;35:*.rmvb=01;35:*.flc=01;35:*.avi=01;35:*.fli=01;35:*.flv=01;35:*.gl=01;35:*.dl=01;35:*.xcf=01;35:*.xwd=01;35:*.yuv=01;35:*.cgm=01;35:*.emf=01;35:*.ogv=01;35:*.ogx=01;35:*.aac=00;36:*.au=00;36:*.flac=00;36:*.m4a=00;36:*.mid=00;36:*.midi=00;36:*.mka=00;36:*.mp3=00;36:*.mpc=00;36:*.ogg=00;36:*.ra=00;36:*.wav=00;36:*.oga=00;36:*.opus=00;36:*.spx=00;36:*.xspf=00;36:,"XDG_SESSION_DESKTOP":ubuntu,"XMODIFIERS":@im=ibus,"XAUTHORITY":/home/jioke/.Xauthority,"npm_package_scripts_e2e":node test/e2e/runner.js,"npm_package_devDependencies_babel_helper_vue_jsx_merge_props":2.0.3,"npm_package_devDependencies_copy_webpack_plugin":4.5.0,"npm_package_devDependencies_cross_spawn":6.0.5,"npm_package_devDependencies_portfinder":1.0.13,"npm_package_browserslist_0":> 1%,"npm_package_gitHead":af9ba67ec99075571f74994a3a11fcd297e6b604,"npm_config_fetch_retry_maxtimeout":60000,"npm_config_loglevel":notice,"npm_config_logs_max":10,"npm_config_message":%s,"npm_lifecycle_script":node build/build.js,"SSH_AUTH_SOCK":/run/user/1000/keyring/ssh,"XDG_GREETER_DATA_DIR":/var/lib/lightdm-data/jioke,"npm_package_scripts_unit":jest --config test/unit/jest.conf.js --coverage,"npm_package_scripts_test":npm run unit && npm run e2e,"npm_package_devDependencies_webpack_dev_server":3.1.0,"npm_package_browserslist_1":last 2 versions,"npm_config_ca":,"npm_config_cert":,"npm_config_global":,"npm_config_link":,"SHELL":/usr/bin/zsh,"npm_package_version":1.0.0,"npm_package_devDependencies_eslint_friendly_formatter":3.0.0,"npm_package_devDependencies_semver":5.5.0,"npm_package_devDependencies_webpack_dev_middleware":3.0.1,"npm_package_browserslist_2":not ie <= 8,"npm_config_access":,"npm_config_also":,"npm_config_save":true,"npm_config_unicode":,"npm_lifecycle_event":build,"QT_ACCESSIBILITY":1,"GDMSESSION":ubuntu,"npm_package_scripts_build":node build/build.js,"npm_config_argv":{"remain":[],"cooked":["run","build"],"original":["run","build"]},"npm_config_long":,"npm_config_production":,"npm_config_searchlimit":20,"npm_config_unsafe_perm":true,"npm_package_dependencies_lodash":4.17.5,"npm_config_auth_type":legacy,"npm_config_node_version":8.9.4,"npm_config_tag":latest,"npm_package_dependencies_vue_router":3.0.1,"npm_package_devDependencies_uglifyjs_webpack_plugin":1.2.2,"npm_config_git_tag_version":true,"npm_config_commit_hooks":true,"npm_config_script_shell":,"npm_config_shrinkwrap":true,"TEXTDOMAINDIR":/usr/share/locale/,"GJS_DEBUG_OUTPUT":stderr,"npm_config_fetch_retry_factor":10,"npm_config_save_exact":,"npm_config_strict_ssl":true,"XDG_VTNR":7,"NODENV_SHELL":zsh,"QT_IM_MODULE":ibus,"npm_package_devDependencies_babel_preset_stage_2":6.24.1,"npm_config_dev":,"npm_config_globalconfig":/home/jioke/.nodenv/versions/8.9.4/etc/npmrc,"npm_config_init_module":/home/jioke/.npm-init.js,"npm_config_parseable":,"PWD":/home/jioke/lab/altalabs/ui,"npm_config_globalignorefile":/home/jioke/.nodenv/versions/8.9.4/etc/npmignore,"npm_execpath":/home/jioke/.nodenv/versions/8.9.4/lib/node_modules/npm/bin/npm-cli.js,"CLUTTER_IM_MODULE":xim,"XDG_DATA_DIRS":/usr/share/ubuntu:/usr/share/ubuntu:/usr/local/share:/usr/share:/var/lib/snapd/desktop:/var/lib/snapd/desktop,"XDG_CONFIG_DIRS":/etc/xdg/xdg-ubuntu:/etc/xdg/xdg-ubuntu:/etc/xdg,"npm_package_author_name":Alta Labs,"npm_package_devDependencies_css_loader":0.28.10,"npm_package_devDependencies_vue_style_loader":4.0.2,"npm_package_engines_npm":>= 5.7.1,"npm_config_cache_lock_retries":10,"npm_config_searchstaleness":900,"NODENV_DIR":/home/jioke/lab/altalabs/ui,"npm_package_devDependencies_babel_preset_env":1.6.1,"npm_package_devDependencies_chromedriver":2.36.0,"npm_package_devDependencies_eslint_plugin_vue":4.3.0,"npm_package_devDependencies_extract_text_webpack_plugin":4.0.0-beta.0,"npm_config_node_options":,"npm_config_save_prefix":^,"npm_config_scripts_prepend_node_path":warn-only,"npm_package_devDependencies_babel_eslint":8.2.2,"npm_package_devDependencies_babel_plugin_transform_runtime":6.23.0,"npm_package_devDependencies_babel_plugin_transform_vue_jsx":3.7.0,"npm_config_group":1000,"npm_config_init_author_email":,"npm_config_searchexclude":,"VTE_VERSION":4804,"npm_package_devDependencies_babel_plugin_syntax_jsx":6.18.0,"npm_package_devDependencies_eslint_plugin_promise":3.6.0,"npm_package_devDependencies_friendly_errors_webpack_plugin":1.6.1,"npm_config_git":git,"npm_config_optional":true,"npm_config_json":,"INIT_CWD":/home/jioke/lab/altalabs/ui,"NODE_ENV":"production"}).TIMEOUT;
我所面临的错误很难理解。 我在Google上搜索过，但未能找到解决方案。 我还检查了webpack文档，但无法获得任何结果来帮助解决这个问题。 我能做错什么？
这是我得到的错误。
...
outPut +=
"<div class=\"col-lg-4 col-md-6 mb-4\">" +
"<div class=\"card h-100\">"+
"<a href=\"#\"><img class=\"card-img-top\" src=\"http://placehold.it/700x400\" style=\"height: 50%; width:50% \" alt=\"\"></a>"+
"<div class=\"card-body\">"+
"<h4 class=\"card-title\">"+
"<a href=\"#\">"+ nome +"</a>"+
"</h4>"+
"<h5>"+ preco +"</h5>"+
"<p class=\"card-text\">"+ descricao +"</p>"+
"</div>"+
"<div class=\"card-footer\" >"+
"<button type=\"button\" class=\"btn btn-success-cart\" data-id=\"" + id + "\" data-nome=\"" + nome + "\" data-descricao=\"" + descricao + "\" data-preco=\"" + preco + "\">+ Carrinho</button>"+
"</div>"+
"</div>"+
"</div>";
...
$("#divCards").html(outPut);
感谢。
答案 0 :(得分：0)
我认为您可能需要在Webpack文件中将[chunkhash]重命名为[hash]