Webpack dev服务器初始化问题

3htmauhk  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(160)

当我在cmd中编写npm run dev时,它给了我以下错误:
配置对象无效。已使用与API方案不匹配的配置对象初始化Webpack。
完整跟踪:

  1. - configuration.module.rules[1].use should be one of these:
  2. non-empty string | function | object { ident?, loader?, options?, query? } | function | [non-empty string | function |
  3. object { ident?, loader?, options?, query? }]
  4. -> Modifiers applied to the module when rule is matched
  5. Details:
  6. * configuration.module.rules[1].use[0] should be a string.
  7. * configuration.module.rules[1].use[0] should be an instance of function
  8. * configuration.module.rules[1].use[0] should be an object.
  9. * configuration.module.rules[1].use[0] should be one of these:
  10. non-empty string | function | object { ident?, loader?, options?, query? }
  11. * configuration.module.rules[1].use[0] should be one of these:
  12. non-empty string | function | object { ident?, loader?, options?, query? }
  13. -> An use item

我的webpack配置文件:

  1. const path = require("path");
  2. const extractCssPlugin = require("mini-css-extract-plugin");
  3. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  4. const JS_DIR = path.resolve(__dirname, "js");
  5. const BUILD = path.resolve(__dirname, "build");
  6. // Entry point of our JS
  7. entry = {
  8. main: JS_DIR + "main.js",
  9. };
  10. // Entry point of the output
  11. output = {
  12. path: BUILD,
  13. filename: 'js/[name].js'
  14. };
  15. // Rules for the webpack
  16. const rules = [
  17. // Rule for the JavaScript
  18. {
  19. test: /\.js$/,
  20. include: [ JS_DIR ],
  21. exclude: /node_modules/,
  22. use: 'babel-loader'
  23. },
  24. // Rule for the scss
  25. {
  26. test: /\.scss$/,
  27. exclude: /node_modules/,
  28. use: [
  29. extractCssPlugin.load,
  30. "css-loader"
  31. ]
  32. },
  33. // Rule for the images
  34. {
  35. test: /\.(png|jpg|jpeg)$/,
  36. use: [
  37. {
  38. loader: "file-loader",
  39. options: {
  40. name: "[path][name].[ext]",
  41. publicPath: ( process.env.NODE_ENV === "production" ) ? "../" : "../../"
  42. }
  43. }
  44. ]
  45. }
  46. ]
  47. // Defining the plugins
  48. const plugins = argv => {
  49. return [
  50. new CleanWebpackPlugin({
  51. cleanStaleWebpackAssets: argv.mode === "production"
  52. }),
  53. new extractCssPlugin({
  54. filename: "css/[name].css"
  55. })
  56. ]
  57. }
  58. module.exports = ( env, argv ) => {
  59. return {
  60. entry: entry,
  61. output: output,
  62. module: {
  63. rules: rules
  64. },
  65. plugins: plugins( argv )
  66. }
  67. }

奇怪的是,开发服务器在我的笔记本电脑上运行得很好,但在我的电脑上却没有,即使我安装了所有必需的软件包。我的代码有什么问题?

z2acfund

z2acfund1#

看看你的webpack配置,我可以看到问题在这一部分:

  1. // Rule for the scss
  2. {
  3. test: /\.scss$/,
  4. exclude: /node_modules/,
  5. use: [
  6. extractCssPlugin.load,
  7. "css-loader"
  8. ]
  9. },

这里的问题是,您正在使用extractCssPlugin.load作为use数组中的值,这导致了错误。相反,根据mini-css-extract-plugin的官方文档,您应该使用来自extractCssPlugin对象的MiniCssExtractPlugin.loader引用。
以下是修改SCSS规则的方法:

  1. // Rule for the scss
  2. {
  3. test: /\.scss$/,
  4. exclude: /node_modules/,
  5. use: [
  6. MiniCssExtractPlugin.loader,
  7. "css-loader"
  8. ]
  9. },

确保在webpack配置文件的顶部也有必要的导入:

  1. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  2. const { CleanWebpackPlugin } = require("clean-webpack-plugin");

我希望这可以解决SCSS规则的问题,并帮助您在计算机上运行webpack dev服务器。

展开查看全部

相关问题