webpack打包踩坑记录

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

明显内存不够。可能原因：

1.电脑本身的内存小

2.项目中杂入了一些其他文件（本人就误操作将一个11M的js放到了项目一个文件中，导致打包时内存不够）

swiper引入打包报错：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

原因是引入swiper4.5.0

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

View Code

直接报错。感觉是swiper代码需要做babel转换才能运行。但是 https://github.com/nolimits4web/Swiper/issues/2263，经过多种方式依然不行。

查看官网，使用方式应该是

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

后面查看官网发现有一个专门为vue写的swiper：vue-awesome-swiper。这种方式也可以，但是感觉侵入性比较强。所以没有用

升级webpack4遇到的相关问题

可以参考：https://segmentfault.com/a/1190000014516899

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

网络上这个问题基本方案都指向用extract-text-webpack-plugin升级为mini-css-extract-plugin。实际上还可能是因为optimize-css-assets-webpack-plugin版本过低导致

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

本人用vue-cli做工程，webpack升级到4.x，想要使用html-loader。

主要的原因有：file-loader,url-loader版本太低，无法匹配最新的html-loader，并且html-loader的配置方式也更改了，需要对应更改。比如本人使用了cdn，静态资源都保存到cdn，

"html-loader": "^1.0.0",

"file-loader": "^6.0.0",

"url-loader": "^4.0.0",

// module.rules中代码片段
          {
                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: {
                        root: path.resolve(__dirname, '../src'),// html中引用时直接使用"/assets/img/xxx.ico"这样子
                        list: [
                            {
                                tag: 'img',
                                attribute: 'src',
                                type: 'src'
                            },{
                                tag: 'link',
                                attribute: 'href',
                                type: 'src'
                            }
                        ]
                    }
                }
            }
// html代码片段
<!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

比较明显，图片打成base64，但是标签的属性的双引号被去掉了导致的。有文档说是HtmlWebpackPlugin配置中的removeAttributeQuotes属性控制导致的

    new HtmlWebpackPlugin({
      filename:  'index.html',
      template: 'index.html',
      minify: {
        ...
        removeAttributeQuotes: false, // 之前是true，改为false就行
     },
      ...
    }),

改了之后其他的属性都加上了，但是就是这个base64没有加上，问题依然存在。如果不使用minify的话还可以，问题在于使用minify会解析html，一解析就报错。所以这算是一个bug吧，我提了一个单：https://github.com/jantimon/html-webpack-plugin/issues/1368

目前有两个方案，一个是”minify:false“，要么就url-loader配置不进行base64。

file-loader升级过度导致element-ui图标不展示

file-loader 5.x以上就会出现这个问题，后面本人使用4.x

==========

2020.3.27

很早之前整理了一些，今天放出来，后面有遇到其他的再加上