[JavaScript知识库]vue 打包异常记录

Module build failed (from ./node_modules/_vue-loader@13.3.0@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\.babelrc

package和,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

Error: Cannot find module 'webpack-merge'

npm install --save-dev webpack-merge?

module.exports = merge(prodEnv, {
                 ^

TypeError: merge is not a function

const merge = require('webpack-merge')

修改为

const {merge}= require('webpack-merge')

Cannot find module 'extract-text-webpack-plugin'

cnpm install --save extract-text-webpack-plugin

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 main

resolve: {? ? 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(),
?

    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: ['.*'],
? ? ? ? }]
? ? ? })

const webpackConfig = merge(baseWebpackConfig, {
                      ^

TypeError: merge is not a function

cnpm i html-webpack-plugin@4.5.0 -D

    compiler.hooks.make.tapAsync(
                   ^

TypeError: Cannot read properties of undefined (reading 'make')

注释掉?new webpack.optimize.CommonsChunkPlugin?

> 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'

ERROR in ./src/main.js
Module build failed (from ./node_modules/_babel-loader@7.1.1@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

Module parse failed: Unexpected character '@'

cnpm install stylus babel-plugin-transform-decorators-legacy --save-dev

.babelrc（可能会集成在其他文件）修改{

"presets": ["es2015"], "

plugins": ["transform-decorators-legacy"] }

Error: Cannot find module 'babel-preset-es2015'
Require stack:

cnpm i babel-preset-es2015 -D

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

Module not found: Error: Can't resolve 'vue-loader' i

cnpm i --save-dev babel-loader

Module build failed (from ./node_modules/_vue-loader@17.0.0@vue-loader/dist/index.js):
Error: Cannot find module 'vue/compiler-sfc'
Require stack:

npm i vue-loader@15 -D

ERROR in static/js/6533.js from UglifyJs
`warnings` is not a supported option

optimization.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/_vue-loader@17.0.0@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博客

 component lists rendered with v-for should have explicit keys.

v-for需要加上：key

?v-for="(item,index) in labelList" :key="index"

TypeError: Cannot read properties of undefined (reading 'fileLoader')

cnpm i vue-loader@15 -D

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖