Cuando ejecuto el script para "webpack-dev-server --config webpack.dev.js", aparece este error:
Error: para el entorno seleccionado no hay un formato de fragmento de script predeterminado disponible: JSONP Array push se puede elegir cuando 'document' o 'importScripts' están disponibles. Las exportaciones de CommonJs se pueden elegir cuando 'requerir' o elementos integrados de nodo están disponibles. Asegúrese de que su 'lista de navegadores' incluya solo plataformas que admitan estas funciones o seleccione un 'objetivo' apropiado para permitir seleccionar un formato de fragmento de forma predeterminada. Alternativamente, especifique el 'output.chunkFormat' directamente.
¿Qué es este error? Estos son los archivos en el directorio de mi proyecto:
index.html <html lang="en"> <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" /> <link rel="stylesheet" href="./dist/main.css" /> <title>Project Name</title> </head> <body> <script src="./dist/main.js"></script> </body> </html> package.json { "name": "js", "version": "1.0.0", "description": "Browser 2D game ", "main": "index.js", "scripts": { "start": "webpack-dev-server --config webpack.dev.js", "webpack:watch": "webpack --watch --config webpack.dev.js", "webpack:build": "webpack --config webpack.prod.js --optimize-minimize" }, "repository": { "type": "git", "url": "" }, "author": "", "license": "ISC", "bugs": { "url": "" }, "browserslist": [ "last 1 version", "> 1%", "maintained node versions", "not dead" ], "homepage": "", "devDependencies": { "@babel/core": "^7.15.5", "@babel/plugin-proposal-optional-chaining": "^7.14.5", "@babel/preset-env": "^7.15.6", "autoprefixer": "^10.3.7", "babel-loader": "^8.2.2", "css-loader": "^6.3.0", "fibers": "^5.0.0", "file-loader": "^6.2.0", "mini-css-extract-plugin": "^2.3.0", "postcss-loader": "^6.1.1", "sass": "^1.42.1", "sass-loader": "^12.1.0", "style-loader": "^3.3.0", "url-loader": "^4.1.1", "webpack": "^5.56.1", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.3.1", "webpack-merge": "^5.8.0" } } postcss.config.js module.exports = { plugins: { autoprefixer: {} } }; webpack.common.js const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const outputDir = "./dist"; module.exports = { entry: path.resolve(__dirname, "src", "index.js"), output: { path: path.join(__dirname, outputDir), filename: "[name].js", publicPath: "/dist/", }, resolve: { extensions: [".js"], // if we were using React.js, we would include ".jsx" }, module: { rules: [ { test: /\.js$/, // if we were using React.js, we would use \.jsx?$/ use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], plugins: ["@babel/plugin-proposal-optional-chaining"], exclude: /node_modules/, }, // if we were using React.js, we would include "react" }, }, { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { // you can specify a publicPath here // by default it uses publicPath in webpackOptions.output publicPath: "../", }, }, "css-loader", "postcss-loader", ], }, { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: "file-loader", options: { // you can specify a publicPath here // by default it uses publicPath in webpackOptions.output name: "[name].[ext]", outputPath: "images/", publicPath: "images/", }, }, ], }, { test: /\.s[ca]ss/i, use: [ { loader: MiniCssExtractPlugin.loader, options: { // you can specify a publicPath here // by default it uses publicPath in webpackOptions.output publicPath: "../", }, }, "css-loader", "resolve-url-loader", { loader: "sass-loader", options: { implementation: require('sass') } }, "postcss-loader", ], }, ], }, plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // all options are optional filename: "[name].css", chunkFilename: "[id].css", ignoreOrder: false, // Enable to remove warnings about conflicting order }), require("autoprefixer"), ], }; webpack.dev.js const { merge } = require("webpack-merge"); const common = require("./webpack.common.js"); module.exports = merge(common, { mode: "development", devtool: "inline-source-map", devServer: { contentBase: "./", watchContentBase: true, open: true, // use "chrome" for PC }, }); webpack.prod.js const { merge } = require("webpack-merge"); const common = require("./webpack.common.js"); module.exports = merge(common, { mode: "development", devtool: "inline-source-map", devServer: { contentBase: "./", watchContentBase: true, open: true, // use "chrome" for PC }, });¿Ha intentado eliminar cualquier mención de nodo de la entrada de la lista de navegadores en package.json? Tuve un problema similar y eso pareció funcionar para mí.
La eliminación de "maintained node versions" de las listas de navegadores también funcionó para nosotros.
He tenido este problema antes. Puede resolver esto agregando un atributo de target . Debido a que JavaScript se puede escribir tanto para el servidor (Nodo) como para el navegador (ES6), el paquete web ofrece múltiples objetivos de implementación que puede configurar en su paquete web. Puede dividir la configuración del paquete web y tener una configuración de paquete web separada para el server y client .
Por ejemplo, si está utilizando React para su front-end y Node para su back-end, puede escribir target: 'web' y target: 'node' respectivamente.