An error is reported when packaging with NPX webpack serve
the following error is displayed
static heartbeat interval = 1000;
SyntaxError: Unexpected token =
Information about installing webpack
“webpack”: “^ 5.64.4”,
“webpack cli”: “^ 4.9.1”,
“webpack dev server”: “^ 4.6.0”
reason
node version is too low
Solution
install the latest node version
because webpack dev server v4 0.0 + node >= v12.13.0, webpack >= v4.37.0
How to configure:
NPM I compression webpack plugin - d install the plug-in and add the following configuration in Vue.Config.JS (the compression plugin configuration options depend on your personal needs)
configureWebpack: {
plugins: [
new CompressionPlugin({
test: /\.(js|css)?$/i, // Which files to compress
algorithm:'gzip', // Use gzip compression
})
]
}
Problems:
usegzip to unzip the Vue project report an error:Error: Rule can only have one resource source (provided resource and test + include + exclude).
Cause Analysis:
Webpack version conflict in package.json
Solution:
npm i [email protected] -D
npm i [email protected] [email protected] -D
Vue uses style loader to add CSS style to Dom and reports an error
ERROR in ./src/css/normal.css
Module build failed: CssSyntaxError
(1:1) Unknown word
> 1 | var content = require("!!./normal.css");
| ^
2 |
3 | if (typeof content === 'string') {
@ ./src/main.js 11:0-27
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
The loader sequence you configured in the webpack.config.js file may be wrong
original code
const path=require('path')
module.exports={
entry: './src/main.js',
output: {
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['css-loader','style-loader']
},
]
}
}
Code after modification
const path=require('path')
module.exports={
entry: './src/main.js',
output: {
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
]
}
}
This is because when multiple loaders are configured, the program is read from right to left
Error reason:
as shown in the title, command Vue init webpack Vue through Vue cli tool_ An error is reported when the portal creates a Vue project, indicating that the connection timed out because the intranet cannot be downloaded. The screenshot of the timeout error is as follows:
Solution:
to create offline, we need to download Vue templates/webpack in GitHub warehouse, and then extract it locally.
1. First, create a new .Vue templates directory under the root directory of each user. Note the dot (.)
2. Go to the Internet to download webpack
the download address is: https://github.com/vuejs-templates/webpack After downloading, unzip it to the. Vue templates directory under the local user directory.
3. The downloaded compressed package is webpack-development.zip. After decompression, we need to change the directory name to webpack
4. In this way, we will conduct Vue init webpack When using the Vue_portal command, you need to bring the parameter — offline, which means offline initialization
NPM run build packaging source code is incompatible with multiple versions of webpack, and an error is reported
Then use NPM run build to package the source code, and there is a webpack error, and then the prompt message of NPM audit fix is as follows
su@ly050:~/Downloads/dingtalk$ npm audit fix
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! peer webpack@"4.x.x || 5.x.x" from @webpack-cli/[email protected]
npm ERR! node_modules/@webpack-cli/configtest
npm ERR! @webpack-cli/configtest@"^1.1.0" from [email protected]
npm ERR! node_modules/webpack-cli
npm ERR! dev webpack-cli@"^4.9.1" from the root project
npm ERR! 3 more (@webpack-cli/configtest, @webpack-cli/info, @webpack-cli/serve)
npm ERR! peer webpack@">=2" from [email protected]
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader@"^8.1.0" from the root project
npm ERR! 13 more (clean-webpack-plugin, eslint-loader, file-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.27.0 || ^5.0.0" from [email protected]
npm ERR! node_modules/css-loader
npm ERR! dev css-loader@"^4.2.1" from the root project
npm ERR! peer css-loader@"*" from [email protected]
npm ERR! node_modules/vue-loader
npm ERR! dev vue-loader@"^15.9.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^4.27.0 || ^5.0.0" from [email protected]
npm ERR! node_modules/css-loader
npm ERR! dev css-loader@"^4.2.1" from the root project
npm ERR! peer css-loader@"*" from [email protected]
npm ERR! node_modules/vue-loader
npm ERR! dev vue-loader@"^15.9.3" 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.
npm ERR!
npm ERR! See /home/su/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/su/.npm/_logs/2021-11-01T01_35_04_547Z-debug.log
My approach is to uninstall the current webpack and then reassign a global version.
sudo npm uninstall webpack
sudo npm install [email protected] -g
After NPM run build is executed, a dist folder will be generated, index.html will be opened, and an error will be reported on the console
As shown in the figure below:
This is because the correct path cannot be found, resulting in an error.
Solution:
1. In the root directory, create a new vue.config.js file. Of course, if any, ignore this item;
2. In vue.config.js, change publicpath: “/” to Publicpath: “. /”, then repackage and NPM run build.
publicPath: “/” =====>>>>>>>> publicPath: “./”
For the location of writing, you can refer to the following code:
module.exports = {
devServer: {
port: 8080,
open: true
},
lintOnSave: false,
publicPath: "./",
outputDir: "dist",
assetsDir: "static",//Set the directory where the static resources (js, css, img, fonts) generated by the package will be placed.
indexPath: 'index.html'//Used to set the storage location of the index.html file generated by the package
}Error message
ERROR in main.c3605.js from Terser
Error: Call retries were exceeded
at ChildProcessWorker.initialize (/home/node_modules/terser-webpack-plugin/node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)
at ChildProcessWorker._onExit (/home/node_modules/terser-webpack-plugin/node_modules/jest-worker/build/workers/ChildProcessWorker.js:274:12)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
How to Find the Solution:
Since 2.3.0, webpack builds on CircleCI fail with “Error: Call retries were exceeded”
View operating system logs
less /var/log/messages
Solution
Increase server memory and reduce Max specified in the build command_old_space_Size value
In the package.json package
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open",
"bulid": "webpack -p"
},“bulid”: “webpack -p” – The P instruction can no longer be recognized and has been eliminated. Change to:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open",
"bulid": "webpack"
},CSS loader update
In the old version, CSS loader cannot recognize the URL address. In addition, URL loader is cumbersome, but it can automatically generate Base64 images to reduce the pressure on the server. The new version directly supports URL parsing, but obviously this function can also be configured:
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
url: true,
},
},
],
},
};
Disable the URL, but it seems that the CSS attribute and ID selector will not work after configuration;
Vue loader configuration encountered great obstacles
When using Vue loader, you must download Vue template compiler to parse Vue files
Configuration options:
const VueLoaderPlugin = require('vue-loader/lib/plugin');//Must Import
module.exports = {
module: {
rules: [
{ test: /\.vue/, use: ['vue-loader'] }
]
},
plugins: [new VueLoaderPlugin()]//Must configurate
}But there was a problem after I configured it
All the methods on the Internet are invalid. Finally, it is found that Vue is not installed
npm i vueThere are also problems after installation, and the error is still reported
Finally, you can see that the version numbers of Vue template compiler and Vue are different, so they are updated The problem was finally solved after Vue template compiler
Use [email protected] time: wrong type: webpack.namedmodulesplugin is not a constructor
Next, webpack.config.js:
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.config.base');
module.exports = merge(baseConfig, {
mode: process.env.NODE_ENV,
entry: {
index: './app/index.ts',
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
],
});
Cause of problem: in 5.0, namedmodules plugin has been removed
Refer to upgrading obsolete configuration items
NamedModulesPlugin → optimization.moduleIds: ‘named’
optimization: {
moduleIds: 'named'
}
Modify configuration:
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.config.base');
module.exports = merge(baseConfig, {
mode: process.env.NODE_ENV,
entry: {
index: './app/index.ts',
},
optimization: {
moduleIds: 'named'
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
],
});
PS. moduleid it seems that the default value is named?Just remove namedmodules plugin.
Several error messages were encountered when learning Vue project was packaged
★ Extra semicolon
The first is that there is an additional semicolon. The error query found that main.js does have a semicolon. After we deleted it, the error disappeared
★ Expected indentation of 2 spaces but found 4
The second one is “expected to indent 2 spaces, but found 4”. After Baidu search, it is found that this is not an error, but a check rule. Find this file in the project and add this configuration. See the figure below
★ Newline required at end of file but not found
The third one is more wonderful. It means that “line breaks are required at the end of the file, but they are not found”. Then we go to the error file, that is, main.js. We can solve the error by typing enter at the end. See the figure below
Adding a blank line here can solve the problem of error reporting
Error message
_node_modules_vue_dist_vue_global_ js__WEBPACK_IMPORTED_MODULE_1___ default().createApp is not a function
There is a problem with the way Vue is introduced
The correct introduction method is
import { createApp } from 'vue';
var App = {
data() {
return {
images: [{
Picture: "img"
},
{
Picture: "img2"
}
],
}
}
}
const app = createApp(App); // 将数据添加到Vue数据绑定上
const vm = app.mount("#app"); // 将数据绑定到指定id上Error: Rule can only have one resource source (provided resource and test + include + exclude) in
"exclude": [
null
],
"use": [
{
"loader": "/Users/juanpablo/front-treatments/node_modules/cache-loader/dist/cjs.js",
"options": {
"cacheDirectory": "/Users/juanpablo/front-treatments/node_modules/.cache/babel-loader",
"cacheIdentifier": "81fef5a6"
},
"ident": "clonedRuleSet-38[0].rules[0].use[0]"
},
{
"loader": "/Users/juanpablo/front-treatments/node_modules/babel-loader/lib/index.js",
"options": "undefined",
"ident": "undefined"
}
]
} ````
A complete log of this run can be found in:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli '/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/node',
1 verbose cli '/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'serve'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle [email protected]~preserve: [email protected]
6 info lifecycle [email protected]~serve: [email protected]
7 verbose lifecycle [email protected]~serve: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~serve: PATH: /Users/juanpablo/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/juanpablo/front-treatments/node_modules/.bin:/Users/juanpablo/.nvm/versions/node/v12.19.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/juanpablo/.rvm/bin
9 verbose lifecycle [email protected]~serve: CWD: /Users/juanpablo/front-treatments
10 silly lifecycle [email protected]~serve: Args: [ '-c', 'vue-cli-service serve' ]
11 silly lifecycle [email protected]~serve: Returned: code: 1 signal: null
12 info lifecycle [email protected]~serve: Failed to exec serve script
13 verbose stack Error: [email protected] serve: `vue-cli-service serve`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/Users/juanpablo/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:314:20)
13 verbose stack at ChildProcess.<anonymous> (/Users/juanpablo/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:314:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/juanpablo/front-treatments
16 verbose Darwin 19.6.0
17 verbose argv "/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/node" "/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/npm" "run" "serve"
18 verbose node v12.19.0
19 verbose npm v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] serve: `vue-cli-service serve`
22 error Exit status 1
23 error Failed at the [email protected] serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Solution:
delete the webpack and reinstall the previous version
npm uninstall webpack
npm install webpack@^4.0.0 –save-dev