webpack packaged stepped pit Record

 

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6A8FEF04A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+5114
 2: 00007FF6A8FCA0C6 node::MakeCallback+4518
 3: 00007FF6A8FCAA30 node_module_register+2032
 4: 00007FF6A92520EE v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF6A925201F v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF6A9772BC4 v8::internal::Heap::MaxHeapGrowingFactor+9556
 7: 00007FF6A9769C46 v8::internal::ScavengeJob::operator=+24310
 8: 00007FF6A976829C v8::internal::ScavengeJob::operator=+17740
 9: 00007FF6A9770F87 v8::internal::Heap::MaxHeapGrowingFactor+2327
10: 00007FF6A9771006 v8::internal::Heap::MaxHeapGrowingFactor+2454
11: 00007FF6A932CDB7 v8::internal::Factory::NewFillerObject+55
12: 00007FF6A93C2CC6 v8::internal::WasmJs::Install+29414

View Code

 Obviously not enough memory. Possible Causes:

1. The computer itself is a small memory

2. project into a number of other miscellaneous documents (himself a misuse of 11M js file into a project, leading to insufficient memory when packaging)

 

swiper introduction of packaged error: ERROR in static / js / 2.bbc3c185f3337ecd8199.js from UglifyJs

ERROR in static/js/2.bbc3c185f3337ecd8199.js from UglifyJs
Unexpected token: name «Dom7», expected: punc «;» [./node_modules/dom7/dist/dom7.modular.js:16,0][static/js/2.bbc3c185f3337ecd8199.js:75614,6]

View Code

The reason is the introduction of swiper4.5.0

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.css'

View Code

Direct error. Feeling is swiper code needs to do babel converted to run. But https://github.com/nolimits4web/Swiper/issues/2263 , through a variety of ways still not.

Check the official website, use should be

import Swiper from 'swiper/dist/js/swiper.esm.bundle';

Check the official website later found to have a specialized vue written swiper: vue-awesome-swiper. This approach is also possible, but it feels invasive relatively strong. So there is no use

 

Upgrade related issues encountered webpack4

You can refer to: https://segmentfault.com/a/1190000014516899

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

Fundamental for this problem on the network point with the extract-text-webpack-plugin-upgrade to CSS-Extract-Mini plugin . It may actually be due optimize-css-assets-webpack- plugin version is too low lead

 

 Module parse failed: Unexpected character ''

ERROR in   Error: Child compilation failed:
  Module parse failed: Unexpected character '' (1:0)
  You may need an appropriate loader to handle this file type, currently no load  ers are configured to process this file. See https://webpack.js.org/concepts#l  oaders
  (Source code omitted for this binary file):
  SyntaxError: Unexpected character '' (1:0)

  - compiler.js:79 childCompiler.runAsChild
    [front-operation]/[[email protected]@html-webpack-plugin]/lib/compi    ler.js:79:16

 

I do with vue-cli project, webpack upgrade to 4.x, you want to use html-loader.

The main reasons are: file-loader, url-loader version is too low to match the latest html-loader, and html-loader configuration mode is also changed, the corresponding need for change. For example, I use the cdn, static resources are saved to cdn,

"html-loader": "^1.0.0",

"file-loader": "^6.0.0",

"url-loader": "^4.0.0",

// module.rules code fragment 
          {
                test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]'),
                    publicPath: 'https://cdn1.xxx.com/static/'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    attributes: {
                        the root: path.resolve (__ dirname, '../src'), // directly like this "/assets/img/xxx.ico" html when referenced 
                        list: [
                            {
                                tag: 'img',
                                attribute: 'src',
                                type: 'src'
                            },{
                                tag: 'link' ,
                                attribute: 'href',
                                type: 'src'
                            }
                        ]
                    }
                }
            }
// HTML snippet
<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="shortcut icon" href="/assets/img/favicon.ico">
    ...
  </head>
  ...
</html>

 

 

ERROR in   Error: Parse Error: <link rel="shortcut icon" href=data:image/vnd.microsoft.ic  on;base64,AAABAAEAICAAAAEAIACoEAAAFg

Obviously, the picture labeled base64, but double quotes attribute tag is removed due. There are documents said to be HtmlWebpackPlugin configuration removeAttributeQuotes property control caused

    new HtmlWebpackPlugin({
      filename:  'index.html',
      template: 'index.html',
      minify: {
        ...
        removeAttributeQuotes: false , // before is true, to false on the line 
     }
      ...
    }),     

 

After the change of the other attributes are added, but this is not base64 plus, the problem still exists. If you do not use minify then also, the problem is that the use minify will parse html, a resolve on the error. So this can be considered a bug, and I put a single: https://github.com/jantimon/html-webpack-plugin/issues/1368

Currently there are two options, one is "minify: false", or to url-loader configuration without base64.

 

file-loader upgrade to excessive lead element-ui icon does not show

file-loader this problem occurs more than 5.x, 4.x later I use

 

 

==========

2020.3.27

Long before finishing some, released today, followed by a meet other plus