Webpack开发服务器初始化问题

huangapple
go评论118阅读模式
英文:

Webpack dev server initialization problem

问题

当我在命令提示符中输入npm run dev时，它给我返回以下错误：

无效的配置对象。Webpack已经使用不符合API模式的配置对象进行初始化。

完整的跟踪信息：

  • configuration.module.rules1.use应该是以下之一：
    非空字符串 | 函数 | 对象{ ident?, loader?, options?, query? } | 函数 | [非空字符串 | 函数 | 对象{ ident?, loader?, options?, query? }]
    -> 当规则匹配时应用于模块的修饰符
    详情：

    • configuration.module.rules1.use[0]应该是一个字符串。
    • configuration.module.rules1.use[0]应该是一个函数实例。
    • configuration.module.rules1.use[0]应该是一个对象。
    • configuration.module.rules1.use[0]应该是以下之一：
      非空字符串 | 函数 | 对象{ ident?, loader?, options?, query? }
    • configuration.module.rules1.use[0]应该是以下之一：
      非空字符串 | 函数 | 对象{ ident?, loader?, options?, query? }
      -> 一个use项

我的webpack配置文件如下：

const path = require("path");
const extractCssPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const JS_DIR = path.resolve(__dirname, "js");
const BUILD = path.resolve(__dirname, "build");

// JS的入口点
entry = {
main: JS_DIR + "main.js",
};

// 输出的入口点
output = {
path: BUILD,
filename: 'js/[name].js'
};

// webpack的规则

const rules = [

  1. // JavaScript的规则
  2. {
  3.     test: /\.js$/,
  4.     include: [ JS_DIR ],
  5.     exclude: /node_modules/,
  6.     use: 'babel-loader' 
  7. },
  9. // scss的规则
  10. {
  11.     test: /\.scss$/,
  12.     exclude: /node_modules/,
  13.     use: [
  14.         extractCssPlugin.load,
  15.         "css-loader"
  16.     ] 
  17. },
  19. // 图片的规则
  20. {
  21.     test: /\.(png|jpg|jpeg)$/,
  22.     use: [
  23.         {
  24.             loader: "file-loader",
  25.             options: {
  26.                 name: "[path][name].[ext]",
  27.                 publicPath: ( process.env.NODE_ENV === "production" ) ? "../" : "../../"
  28.             }
  29.         }
  30.     ] 
  31. }

]

// 定义插件

const plugins = argv => {
return [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: argv.mode === "production"
}),
new extractCssPlugin({
filename: "css/[name].css"
})
]
}

module.exports = ( env, argv ) => {
return {
entry: entry,
output: output,
module: {
rules: rules
},
plugins: plugins( argv )
}
}

奇怪的是，开发服务器在我的笔记本电脑上运行得很好，但在我的台式电脑上却不行，尽管我已经安装了所有必需的软件包。我的代码有什么问题？

英文:

When I write npm run dev in cmd, it is giving me following error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schem
a.

Full Trace:

  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

My webpack configuration file:

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

Strangely dev server is running perfectly in my Laptop but not in my Computer even though I installed all required packages. What is wrong in my code?

答案1

得分: 1

看到你的webpack配置，我可以看出问题出在这部分：

// Rule for the scss
{
test: /.scss$/,
exclude: /node_modules/,
use: [
extractCssPlugin.load,
"css-loader"
]
},

问题在于你在"use"数组中使用了"extractCssPlugin.load"作为值，这导致了错误。根据mini-css-extract-plugin的官方文档，你应该使用"extractCssPlugin"对象中的"MiniCssExtractPlugin.loader"引用。

以下是你应该修改的SCSS规则：

// Rule for the scss
{
test: /.scss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},

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

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

希望这样可以解决SCSS规则的问题，并帮助你在电脑上运行webpack开发服务器。

英文:

Looking at your webpack configuration, I can see that the issue is in this part:

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

The problem here is that you are using extractCssPlugin.load as a value in the use array, which is causing the error. Instead, based on the offical docs for mini-css-extract-plugin you should use the MiniCssExtractPlugin.loader reference from the extractCssPlugin object.

Here's how you should modify the SCSS rule:

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

Make sure you also have the necessary imports at the top of your webpack configuration file:

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

I hope this should resolve the issue with the SCSS rule and help you get the webpack dev server running on your computer as well.

huangapple
  • 本文由 发表于 2023年8月9日 03:52:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76862827.html
  • javascript
  • webpack
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定