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

问题描述 投票：0回答：5

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

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

您是否尝试过从 package.json 的浏览器列表条目中删除任何提及的节点？我遇到了类似的问题，这似乎对我有用。

8
投票

从浏览器列表中删除 

"maintained node versions"
也对我们有用。

7
投票

我以前也遇到过这个问题。您可以通过添加 

target
属性来解决此问题。由于 JavaScript 可以为服务器（Node）和浏览器（ES6）编写，因此 webpack 提供了多个可以在 webpack 中设置的部署目标。您可以拆分 webpack 配置，并为 
server
和 
client
提供单独的 webpack 配置。

例如，如果您使用 React 作为前端，使用 Node 作为后端，则可以分别编写 

target: 'web'
和 
target: 'node'
。

2
投票

删除对象 browserslist 或替换为：

"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]

}

0
投票

我通过指定目标列表解决了问题

module.exports = { 
...
  target: ["web", "es5"],
...
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.