当我运行"webpack-dev-server——config webpack.dev.js"的脚本时，我得到了这个错误:
错误:对于选择的环境没有默认的脚本块格式可用:当'document'或'importScripts'可用时，可以选择JSONP数组推送。当"require"或节点内置可用时，可以选择CommonJs导出。确保你的"browserslist"只包含支持这些功能的平台，或者选择一个合适的"目标"来默认选择一个块格式。或者指定"输出"。直接chunkFormat"。
这个错误是什么?这些是我的项目目录下的文件:
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
},
});
您是否尝试过从package.json中的browserslist条目中删除任何提及的节点?我也遇到过类似的问题，这似乎对我有效。
从浏览器列表中删除"maintained node versions"也对我们有效。
我以前遇到过这个问题。您可以通过添加target属性来解决这个问题。因为JavaScript可以同时为服务器(Node)和浏览器(ES6)编写，webpack提供了多个部署目标，你可以在你的webpack中设置。您可以拆分webpack配置，并对server和client都有一个单独的webpack配置。
例如，如果你正在使用React用于前端和Node对于你的后端，你可以分别写target: 'web'和target: 'node'。
删除对象browserslist或者这样替换:
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}