为简单项目运行 webpack 脚本时出错
[英]Error when running webpack script for simple project
问题描述
When I run the script for "webpack-dev-server --config webpack.dev.js", I get this error:
当我运行“webpack-dev-server --config webpack.dev.js”的脚本时，出现此错误：
Error: For the selected environment is no default script chunk format available: JSONP Array push can be chosen when 'document' or 'importScripts' is available.错误：对于所选环境，没有可用的默认脚本块格式：当“文档”或“importScripts”可用时，可以选择 JSONP 数组推送。 CommonJs exports can be chosen when 'require' or node builtins are available.当“require”或节点内置可用时，可以选择 CommonJs 导出。 Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default.确保您的“浏览器列表”仅包括支持这些功能的平台或 select 适当的“目标”以允许默认选择块格式。 Alternatively specify the 'output.chunkFormat' directly.或者直接指定“output.chunkFormat”。
What is this error?这是什么错误？ These are the files in my project directory:这些是我的项目目录中的文件：
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
},
});
4 个解决方案
解决方案1
3 2022-02-22 08:44:00
Removing "maintained node versions" from browserlists also worked for us.从浏览器列表中删除"maintained node versions"也对我们有用。
解决方案2
3 2022-03-07 11:48:41
I had this problem before.我以前遇到过这个问题。 You can resolve this by adding a target attribute.您可以通过添加target属性来解决此问题。 Because JavaScript can be written for both server (Node) and browser (ES6), webpack offers multiple deployment targets that you can set in your webpack. You can split up the webpack configuration and have a separate webpack config for both server and client .因为 JavaScript 可以为服务器（Node）和浏览器（ES6）编写，所以 webpack 提供了多个部署目标，您可以在 webpack 中设置这些目标。您可以拆分 webpack 配置，并为server和client分别设置 webpack 配置。
For eg, if you're using React for your front end and Node for your backend, you can write target: 'web' and target: 'node' respectively.例如，如果您的前端使用React ，后端使用Node ，则可以分别编写target: 'web'和target: 'node' 。
解决方案3
2 2022-01-20 15:02:02
Have you tried removing any mention of node from your browserslist entry in package.json?您是否尝试过从 package.json 中的 browserslist 条目中删除任何提及节点的内容？ I had a similar problem and that seemed to work for me.我有一个类似的问题，这似乎对我有用。
解决方案4
0 2022-12-08 21:47:39
Remove the object browserslist or replace with this:删除 object浏览器列表或替换为：
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
} }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.