vue 打包异常记录
包缺失
Error: Cannot find module 'webpack-merge'npm install --save-dev webpack-merge
Cannot find module 'extract-text-webpack-plugin'cnpm install --save extract-text-webpack-plugin
const webpackConfig = merge(baseWebpackConfig, {
^
TypeError: merge is not a functioncnpm i [email protected] -D
ERROR in ./src/main.js
Module build failed (from ./node_modules/[email protected]@babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-component'
Require stack:cnpm i babel-plugin-component -D
Error: Cannot find module '@vue/babel-preset-app'
Require stack:cnpm i @vue/babel-preset-app -D
WARNING in ./src/icons/svg/ sync \.svg$ ./icon-admin.svg
Module not found: Error: Can't resolve 'svg-sprite-loader' in 'cnpm install stylus svg-sprite-loader --save-dev
Error: Cannot find module 'babel-preset-es2015'
Require stack:cnpm i babel-preset-es2015 -D
Module not found: Error: Can't resolve 'vue-loader' icnpm i --save-dev babel-loader
Module build failed (from ./node_modules/[email protected]@vue-loader/dist/index.js):
Error: Cannot find module 'vue/compiler-sfc'
Require stack:npm i vue-loader@15 -D
TypeError: Cannot read properties of undefined (reading 'fileLoader')cnpm i vue-loader@15 -D
compiler.hooks.thisCompilation.tap(pluginName, compilation => {
^
TypeError: Cannot read properties of undefined (reading 'thisCompilation')npm uninstall compression-webpack-plugin
cnpm install --save-dev [email protected]
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`cnpm install --save-dev [email protected]
ERROR in ./src/main.js
Module build failed: Error: Couldn't find preset "@babel/react" relative to directorycnpm install --save-dev html-webpack-plugin
D:\ITEM\chembull\Code\web-admin-ui\node_modules\[email protected]@html-webpack-plugin\index.js:40
compiler.hooks.initialize.tap('HtmlWebpackPlugin', () => {
^
TypeError: Cannot read properties of undefined (reading 'initialize')cnpm install --save-dev html-webpack-plugin@^3.2.0
语法错误
component lists rendered with v-for should have explicit keys.v-for需要加上：key
v-for="(item,index) in labelList" :key="index"
module.exports = merge(prodEnv, {
^
TypeError: merge is not a functionconst merge = require('webpack-merge')
修改为
const {merge}= require('webpack-merge')
配置文件错误
ERROR in multi main
Module not found: Error: Cannot resolve module '\src\main.js' inadmin-ui
@ multi main
ERROR in multi main
Module not found: Error: Cannot resolve module 'babel-polyfill' in
@ multi mainresolve: { extensions: ['', '.es6'']} 增加空格
new webpack.HashedModuleIdsPlugin(),
^
TypeError: webpack.HashedModuleIdsPlugin is not a constructor注释new webpack.HashedModuleIdsPlugin(),
module.exports中增加
optimization: { moduleIds: 'named' },
new webpack.optimize.ModuleConcatenationPlugin(),
^
TypeError: webpack.optimize.ModuleConcatenationPlugin is not a constructor注释 new webpack.optimize.ModuleConcatenationPlugin(),
compiler.hooks.make.tapAsync(
^
TypeError: Cannot read properties of undefined (reading 'make')注释掉 new webpack.optimize.CommonsChunkPlugin
throw new _ValidationError.default(errors, schema, configuration);
^
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
- options.patterns[0] has an unknown property 'ignore'. These properties are valid: new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
改成
new CopyWebpackPlugin({
patterns:[{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
//ignore: ['.*'],
}]
})
> webpack --progress --config build/webpack.prod.conf.js
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.optimization.splitChunks should be one of these:
false | object { automaticNameDelimiter?, cacheGroups?, chunks?, defaultSizeTypes?, enforceSizeThreshold?, fallbackCacheGroup?, filename?, hidePathInfo?, maxAsyncRequests?, maxAsyncSize?, maxInitialRequests?, maxInitialSize?, maxSize?, minChunks?, minRemainingSize?, minSize?, minSizeReduction?, name?, usedExports? }
-> Optimize duplication and caching by splitting chunks by shared modules and cache group.
Details:
* configuration.optimization.splitChunks.name should be one of these:
false | string | function
-> Give chunks created a name (chunks with equal name are merged).
Details:
* configuration.optimization.splitChunks.name should be false.
* configuration.optimization.splitChunks.name should be a string.
* configuration.optimization.splitChunks.name should be an instance of function.
重写
optimization: {
minimizer: [
new UglifyJsPlugin({
exclude: /\.min\.js$/,
cache: true,
parallel: true, // 开启并行压缩，充分利用cpu
sourceMap: false,
extractComments: false, // 移除注释
uglifyOptions: {
compress: {
unused: true,
warnings: false,
drop_debugger: true
},
output: { comments: false }
}
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessorOptions: {
safe: true,
autoprefixer: { disable: true },
mergeLonghand: false,
discardComments: {
removeAll: true // 移除注释
}
},
canPrint: true
})
]
},
[webpack-cli] TypeError: compiler.plugin is not a function
at ExtractTextPlugin.apply 移除 extract-text-webpack-plugin插件后，安装mini-css-extract-plugin
配置webpack.config
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,'css-loader']
}
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: "[id].css"
})
throw new Error('"' + sortMode + '" is not a valid chunk sort mode');
^
Error: "dependency" is not a valid chunk sort mode chunksSortMode: 'dependency'
改成 chunksSortMode: 'auto'
Module parse failed: Unexpected character '@'cnpm install stylus babel-plugin-transform-decorators-legacy --save-dev
.babelrc（可能会集成在其他文件）修改{
"presets": ["es2015"], "
plugins": ["transform-decorators-legacy"] }
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
Duplicates detected are:根据 Duplicates detected are: 提示删除package.json重复的插件
Using removed Babel 5 option: .modules
- Use the corresponding module transform plugin in the `plugins` option.
Check out http://babeljs.io/docs/plugins/#modules删除presets中的module
Error: Cannot use the decorators and decorators-legacy plugin together 删除 plugins 中的 transform-decorators-legacy
ERROR in static/js/6533.js from UglifyJs
`warnings` is not a supported optionoptimization.minimizer UglifyJsPlugin语法有变。
new UglifyJsPlugin({
exclude: /\.min\.js$/,
cache: true,
parallel: true,
sourceMap: false,
extractComments: false,
warnings: false,
uglifyOptions: {
compress: {
warnings: false,//原始位置
unused: true,
drop_debugger: true
},
output: {
comments: false
}
}
}),
Module parse failed: Unexpected token (2:2)
File was processed with these loaders:
* ./node_modules/[email protected]@vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.style不识别，配置没加载出来，有个教程让我把代码注释掉了，下面这段代码就是
const ExtractTextPlugin = require('extract-text-webpack-plugin')
ExtractTextPlugin.extract({use: 'css-loader', fallback: 'vue-style-loader'})
vue 中的style不能识别webpack配置打包支持scss、自动import全局文件、分享变量、单独提取css文件、自动生成HTML页面_A-Tione的博客-CSDN博客
[webpack-cli] Invalid options object. Compression Plugin has been initialized using an options object that does not match the API schema.
- options has an unknown property 'asset'. These properties are valid:
object { test?, include?, exclude?, algorithm?, compressionOptions?, threshold?, minRatio?, deleteOriginalAssets?, filename? }webpack.prod.conf.js ，将 assert 修改为 filename: '[path][base].gz',// 整个复制，值格式也变了
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.module.exports下增加
performance: {
hints:'warning',
//入口起点的最大体积 整数类型（以字节为单位）
maxEntrypointSize: 50000000,
//生成文件的最大体积 整数类型（以字节为单位 300k）
maxAssetSize: 500000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
} ,
warning The "components" property should be above the "template" property on书写顺序有误，改下文件下的属性顺序（泥马真不明白，这bug怎么设计的也不修复）
WARNING
DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
module.exports .optimization. 下增加 nodeEnv: false,
Module build failed: Error: .plugins[1][1] must be an object, false, or undefined"plugins": ["transform-runtime", ["component", [ { "libraryName": "element-ui" } ]]],
改成
"plugins": ["transform-runtime",
["component", {
"libraryName": "mint-ui",
"style": true
}]
],
ERROR in ./src/main.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\ITEM\chembull\Code\web-admin-ui\node_modules\[email protected]@babel-preset-stage-2\lib\index.js "babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
版本号替换
Module build failed (from ./node_modules/[email protected]@vue-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'vue')package.json 或者.babelrc 中添加 "presets":[ "@vue/app"]
Error: Multiple configuration files found. Please remove one:
- package.json
- D:\ITEM\chembull\Code\web-admin-ui\.babelrcpackage和,babelrc配置重复，移除一个
This API has been removed.
If you're looking for this functionality in Babel 7,
you should import the '@babel/helper-module-imports'
module and use the functions exposed from that module, s
uch as 'addNamed' or 'addDefault'.cnpm cache verify
cnpm install
删除 node_modules
npm run build
webpackJsonp is not defined
webpackJsonp is not defined - WayneLiu123 - 博客园
[10:31:14] Error: File not found with singular glob: D:\ITEM\chembull\Code\web-admin-ui\dist/202204281030/static/js/manifest.js (if this was purposeful, use `allowEmpty` option)搜索manifest.js，在出现的位置增加： {allowEmpty: true}
例子：gulp.src(`${versionPath}/static/js/manifest.js`, {allowEmpty: true})
ERROR in ./node_modules/[email protected]@css-loader?{"sourceMap":false}!./node_modules/[email protected]@vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-d2550552","scoped":true,"hasInlineConfig":false}!./node_modules/[email protected]@sass-loader/dist/cjs.js?{"sourceMap":false}!./node_modules/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!.
Module build failed: TypeError: this.getResolve is not a function
at Object.loader 卸载版本 npm uninstall sass-loader
安装 npm install [email protected] --save-dev
'webpack' 不是内部或外部命令，也不是可运行的程序be created: Error: EPERM: operation not permitted, open 'D:\Program Fil安装一下，如果package.json已经有了，还显示，复制出版本号再装一遍
cnpm install [email protected]
Error: Cannot find module 'webpack-node-externals'Cnpm install webpack-node-externals
Module build failed: TypeError: this.getResolve is not a functionnpm install [email protected] --save-dev
Server-side bundle should have one single entry file. Avoid using CommonsChunkPlugin in the server config.webpack3 new webpack.optimize.CommonsChunkPlugin 注释
webpack4 optimization: {splitChunks: false}
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin,webpack.conf.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].css'),
// set the following option to `true` if you want to extract CSS from
// codesplit chunks into this main css file as well.
// This will result in *all* of your app's CSS being loaded upfront.
allChunks: false,
}),