Tag Archives: webpack

[Solved] Error: error:0308010C:digital envelope routines::unsupported

Error: error:0308010C:digital envelope routines::unsupported

npm run serve error: error:0308010C

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:503:5

Solution:
set NODE_OPTIONS=–openssl-legacy-provider

D:\Item\springboot\vue>set NODE_OPTIONS=--openssl-legacy-provider

D:\Item\springboot\vue>npm run serve

> [email protected] serve
> vue-cli-service serve

It can run successfully

The main reason is the incompatibility of versions

[Solved] vueCli 4.x Upgrade to 5.x Error: Progress Plugin Invalid Options

Running the compile command after upgrading vueCli 4.x to 5.x may result in the following error:

ERROR  ValidationError: Progress Plugin Invalid Options
 
        options should NOT have additional properties
        options should NOT have additional properties
        options should NOT have additional properties
        options should pass "instanceof" keyword validation
        options should match exactly one schema in oneOf

This may be caused by the inconsistency between the locally installed version of webpack and the version of vue-cli.

Solution:

1. Check if the webpack version in node_modules is also upgraded to version 5.x. If not, upgrade to version 5.x.

2. Check if the devServer in vue.config.js has overlay configuration, this configuration will be incompatible in vue-cli 5.x version, you have to remove it, otherwise it will also report an error when running

3. delete the wrong node_modules and package-lock.json

4. Clear npm cache: npm cache clean –force

5. reinstall the dependencies: npm install

 

[Solved] webpack Package Error: ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can‘t resolv

When I first came into contact with webpack, I encountered several problems. After successfully installing the latest version of webpack and cli, there was a problem with the first package. In fact, it was also a syntax error

When running webpack .\src\main.js .\dist\bundle.js and packaging, the following error occurs:

Cause of error:

The latest version of the webpack command has changed

Solution:

Add a -o to the previous command.
run webpack .\src\main.js -o .\dist\bundle.js

[webpack-cli] Error: Cannot find module ‘vue/compiler-sfc‘

[webpack-cli] Error: Cannot find module ‘vue/compiler-sfc‘

An error is reported when webpack packages Vue files

[webpack-cli] Error: Cannot find module 'vue/compiler-sfc'

The reason is that I use vue2, but the version is wrong. The following is the corresponding version
Vue 3 requires Vue-loader V16 + @Vue/compiler-sfc
Vue 2 requires vue-loader v15 + vue-template-compiler.

Solution: downgrade to version 15

$ cnpm i [email protected] -D

[Solved] start value has mixed support, consider using flex-start instead

postcss-loader Error => start value has mixed support, consider using flex-start instead”

Details of error reporting:

 warning  in ./src/views/olympicdataquery/personnellist/personaldetails/personaldetails.vue?vue&type=style&index=0&id=87659618&scoped=true&lang=scss&

Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(97:7) start value has mixed support, consider using flex-start instead

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/olympicdataquery/personnellist/personaldetails/personaldetails.vue?vue&type=style&index=0&id=87659618&scoped=true&lang=scss& 4:14-524 15:3-20:5 16:22-532
 @ ./src/views/olympicdataquery/personnellist/personaldetails/personaldetails.vue?vue&type=style&index=0&id=87659618&scoped=true&lang=scss&
 @ ./src/views/olympicdataquery/personnellist/personaldetails/personaldetails.vue
 @ ./src/views sync ^\.\/.*$
 @ ./src/store/modules/permission.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.78:6206&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Although just a warning, but certainly what is not standardized, chrome, found to be someone else’s css is not written standard: flex layout of justify-content: start; change to justify-content: flex-start; on it, no more problems

Modify as below:

OTS parsing error: invalid version tag [How to Solve]

Target: package font file png|woff|woff2|svg|ttf|eot

Tools: use the webpack tool

Foundation: suitable for developers with node foundation

Plug in package to download

css-loader loader for parsing css files
file-loader loader for processing files
html-webpack-plugin plugin for creating an html page in virtual memory”

style-loader A loader that inserts the parsed css style file into the style and places the head tag
url-loader A loader that parses the url path
webpack A tool for compiling code
webpack-cli provides developers with a flexible set of commands to Improve speed when defining webpack projects
webpack-dev-server dev virtual server server

Static compilation: webpack

Dynamic compilation [enable dev to access through HTTP protocol]: NPM run dev


1. Download the iconfont font package from the website

2. Build CSS files according to the prompts in the font file package

3. Import HTML file test

[this step is omitted, and there are cases in the font package]


Configure man.js

//import the example
import './css/index.css';

index.htm

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<!-- <link rel="stylesheet" href="./css/index.css" /> -->
</head>
<body>
	<span class="iconfont afont">&#xe60d;</span>
	<span class="iconfont afont">&#xe60c;</span>
	<span class="iconfont afont">&#xe637;</span>
	<span class="iconfont afont">&#xe63b;</span>
	<span class="iconfont afont">&#xe620;</span>
</body>
</html>

index.css

@font-face {
  font-family: 'iconfont';
  src: url('./icon/iconfont.ttf?t=1650505701581') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

span{
	height: 100px;
	width: 100px;
	/* display: block; */

}
.afont{
	font-size: 150px;	
}

Project initialization

Module download is not cumbersome here

Key: Type: ‘JavaScript/auto’// you must specify the type. Although you don’t know what, it seems that you must specify the type before which version to display that the loading is normal. If you know, please tell us the specific reasons in the comment area below.

No type specified: ‘JavaScript/auto’

Failed to decode downloaded font: http://localhost:3000/36bdff0eed0ef8904943.ttf?t=1650505701581
localhost/:1 OTS parsing error: invalid version tag

webpack.config..js file configuration [complete solution]


const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry:'./src/main.js',
	output:{
		filename:'bundle.js',
		path:resolve(__dirname,'dist')
	},
	module:{
		rules:[
			{test:/\.css$/, use:['style-loader','css-loader']},//css
			// {exclude: /\.(css|js|html)$/, //Exclude the packaging of other resources (in addition to html js css resources unexpected resources) this static packaging font file
			// loader:'file-loader'
			// },
 //{test:/\.(png|woff|woff2|svg|ttf|eot)$/, use:'url-loader?esModule=false&limit=10*1024&name=[hash:8]-[name].[ext]' ,type: 'javascript/auto'},
			{test:/\.(png|woff|woff2|svg|ttf|eot)$/,
			loader:'url-loader',
			options: {
				limit: 10*1024,  //This should be large enough so that all the font icons are packed into the css
				esModule:false,
				name:"[hash:8]-[name]. [ext]"
				},
			// type: 'javascript/auto' // must specify type
			}
			]
			},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./src/index.html',
			filename:'index.html'
		})
	],
	mode:'development'
}

Start the virtual server with NPM run dev

Enter http://localhost:3000 in the browser address and the iconfont font file of the page is displayed normally


vue.config.js build Package UglifyJsPlugin to clear console and print console.log Error: `warnings` is not a supported option

We want to log out all the printing functions. It is certainly unrealistic to log out one by one. It is a waste of energy and time, and there will be omissions

Here we implement it with the help of uglifyjs-webpack-plugin

install

cnpm i uglifyjs-webpack-plugin --save-dev

vue.config.js

// vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
...
configureWebpack: config => {
    if (process.env.NODE_ENV == 'production') {
    
      config.mode = 'production'
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          uglifyOptions: {
			output: {
				comments: false
			},
			// deleteconsole debugger
			compress: {     
				warnings: false,	//	error
				drop_console: true, // console
				drop_debugger: false,
				pure_funcs: ['console.log']// 移除console
			}
          }
        })
      ]
    } else {
      config.mode = 'development'
    }
   }


...

}

warnings is not a supported option

Here is a knowledge point. Warnings will report errors.

Some UglifyJsPlugin versions do not support setting the warnings parameter in the compress of the uglifyOptions object, but directly set warnings as a property in the uglifyOptions object.

If an error is reported. Then write warnings as the uglifyOptions attribute in the following way

// vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
...
configureWebpack: config => {
    if (process.env.NODE_ENV == 'production') {
    
      config.mode = 'production'
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          uglifyOptions: {
			output: {
				comments: false
			},
			// delete console debugger
			compress: {     
				drop_console: true, // console
				drop_debugger: false,
				pure_funcs: ['console.log']// remove console
			}, 
			warnings: false,	//	error
          }
        })
      ]
    } else {
      config.mode = 'development'
    }
   }


...

}

[Solved] npm Error: Error: Cannot find module ‘postcss-loader‘

1. Problem
an error is reported when executing the command NPM run serve:

Error: Cannot find module 'postcss-loader'

2. Solution

The most thorough solution is to uninstall the current nodejs version and install the nodejs version consistent with the module version.

If you don’t want to reinstall nodejs, you can use the following methods:
install module:

npm install postcss-loader

If you continue to report errors:

npm ERR! Could not resolve dependency:
npm ERR! [email protected]"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer [email protected]"^5.0.0" from [email protected]
npm ERR!   node_modules/postcss-loader
npm ERR!     [email protected]"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Take the – force or — legacy-peer-deps parameter after the command:

npm install postcss-loader --legacy-peer-deps

[Solved] Vue Start Project Error: ValidationError: webpack Dev Server Invalid Options

#Vue project development error
premise: during the development of Vue project, error: validationerror: webpack dev server invalid options appear when the project is started

problem analysis:
according to the problem description, the value of the “agent” object used to solve cross domain problems in the configuration file is empty

Solution:
find webpack.config.JS or Vue.config.JS
then find devserver and comment out the proxy or fill in the complete configuration