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 function

cnpm i html-webpack-plugin@4.5.0 -D

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

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

cnpm i babel-preset-es2015 -D

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

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 compression-webpack-plugin@1.1.11

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 babel-core@7.0.0-bridge.0

ERROR in ./src/main.js
Module build failed: Error: Couldn't find preset "@babel/react" relative to directory

cnpm install --save-dev html-webpack-plugin

D:\ITEM\chembull\Code\web-admin-ui\node_modules\_html-webpack-plugin@5.5.0@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 function

const 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 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(),

    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 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博客

[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\_babel-preset-stage-2@6.24.1@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/_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

删除 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/_css-loader@0.28.11@css-loader?{"sourceMap":false}!./node_modules/_vue-loader@13.3.0@vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-d2550552","scoped":true,"hasInlineConfig":false}!./node_modules/_sass-loader@8.0.0@sass-loader/dist/cjs.js?{"sourceMap":false}!./node_modules/_vue-loader@13.3.0@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 sass-loader@7.3.1 --save-dev

'webpack' 不是内部或外部命令，也不是可运行的程序be created: Error: EPERM: operation not permitted, open 'D:\Program Fil

安装一下，如果package.json已经有了，还显示，复制出版本号再装一遍

cnpm install webpack@3.11.0

Error: Cannot find module 'webpack-node-externals'

Cnpm install webpack-node-externals

Module build failed: TypeError: this.getResolve is not a function

 npm install sass-loader@7.3.1 --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,
    }),