html-webpack-plugin Unexpected token )，optipng pre-build test failed

报错日志Entrypoint undefined = index.html html-webpack-plugin 错误ERROR inError: Child compilation failed: Module build failed (from./node_modules/html-webpack-plugin SyntaxError: Unexpected token )之前我一度以为是

网瘾颓废

3276人浏览 · 2020-06-11 13:51:34

网瘾颓废 · 2020-06-11 13:51:34 发布

报错日志

Entrypoint undefined = index.html html-webpack-plugin 错误ERROR in
Error: Child compilation failed: Module build failed (from
./node_modules/html-webpack-plugin SyntaxError: Unexpected token )

之前我一度以为是html-withimg-loader的插件出了问题，更换版本之后还是不可以，然后我新建了个vuecli3的项目下载下来没有问题（大家排查问题可以从这个角度出发)，出现这个问题的原因是我使用了 html-withimg-loader 然后配置后，但是打包后出现了问题，打包后的html成了这个鬼样子，
注释配置卸掉这个node_modules后，报错
但是问题尝试了很多种，无法解决，我没办法又给它装上了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
	  <!-- 使用CDN的CSS文件   -->
	   <!--
	   <% for (var i in htmlWebpackPlugin.options.cdn &&
	    htmlWebpackPlugin.options.cdn.css) { %>
	    -----------------------多写了这个这是我报错的关键，把这个删了就好了------------------------------------
	    <% for (var i in htmlWebpackPlugin.options.cdn &&
	    htmlWebpackPlugin.options.cdn.css) { %>
	    <link
	        href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
	        rel="stylesheet"
	    />
	    <% } %> -->
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="https://at.alicdn.com/t/font_1537329_uilkubfvphh.js"></script>
	  <script src="https://cdn.bootcss.com/vConsole/3.3.2/vconsole.min.js"></script>
	  <script src="./static/js/configure.js"></script>
	  <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
		  <script src="<%=js%>"></script>
		<% } %>
    <!-- built files will be auto injected -->
  </body>
</html>

还不可以的话
npm uninstall html-withimg-loader
检查一下package.json   
 确保那个html-withimg-loader正确卸载完毕
实在不行，干脆删掉所有的node_modules   
删掉    package.json     中的  html-withimg-loader
再执行npm installl   然后在执行上面的步骤

当咱们npm install或者cnpm install下载node_moduled的实话可能会遇到一下报错

⚠ EACCES: permission denied, open '/***//node_modules/optipng-bin/vendor/optipng'
  ⚠ optipng pre-build test failed
  ℹ compiling from source
  ✖ Error: EACCES: permission denied, mkdir

类似这种报错，我也不知道为啥会报错,但是应该是不影响使用的，要想解决可以
调整构建指令 npm install --unsafe-perm=true --allow-root
这样子错误就解决了这个是安装package.json中的包，具体的大家还是百度吧

想了解html-webpack-plugin详解的话，大家可以看下https://www.cnblogs.com/wonyun/p/6030090.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^