堆栈内存溢出
  繁体   English   中英

为简单项目运行 webpack 脚本时出错

[英]Error when running webpack script for simple project

 原文  2021-10-05 00:44:41  8   4    javascript/ node.js/ webpack

问题描述

当我运行“webpack-dev-server --config webpack.dev.js”的脚本时，出现此错误：

错误：对于所选环境，没有可用的默认脚本块格式：当“文档”或“importScripts”可用时，可以选择 JSONP 数组推送。 当“require”或节点内置可用时，可以选择 CommonJs 导出。 确保您的“浏览器列表”仅包括支持这些功能的平台或 select 适当的“目标”以允许默认选择块格式。 或者直接指定“output.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
  },
});

4 个解决方案

解决方案1
 3  2022-02-22 08:44:00

从浏览器列表中删除"maintained node versions"也对我们有用。

解决方案2
 3  2022-03-07 11:48:41

我以前遇到过这个问题。 您可以通过添加target属性来解决此问题。 因为 JavaScript 可以为服务器（Node）和浏览器（ES6）编写，所以 webpack 提供了多个部署目标，您可以在 webpack 中设置这些目标。您可以拆分 webpack 配置，并为server和client分别设置 webpack 配置。

例如，如果您的前端使用React ，后端使用Node ，则可以分别编写target: 'web'和target: 'node' 。

解决方案3
 2  2022-01-20 15:02:02

您是否尝试过从 package.json 中的 browserslist 条目中删除任何提及节点的内容？ 我有一个类似的问题，这似乎对我有用。

"

解决方案4
 0  2022-12-08 21:47:39

删除 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.

相关问题 “webpack”在项目中运行时无法识别 Webpack2在运行webpack-dev-server时引发错误 在两台机器之间共享项目时出现Webpack错误 "为什么在 linux 上运行简单的 puppeteer 脚本时出现“浏览器未下载”错误？" 运行脚本时出现书签错误 运行“npm run develop”时出现错误 #98123 WEBPACK 运行 npm start 时出现 Webpack css 加载器错误 构建项目时，webpack 由于相对路径而报错 生成Webpack 2项目时出错。 WebpackOptionsValidationError：无效的配置对象 简单的演示项目Webpack KO（带有组件）javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM