时间戳

首页 > 解决方案 > 工兵 webpack 警告：“模式”选项尚未设置

webpack - 工兵 webpack 警告：“模式”选项尚未设置

问题描述

我不是 webpack 冠军，当我使用“npx export sapper”时，我有这个警告

    WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

我尝试根据文档更改配置，但没有任何反应（或者当我尝试使用 CLI 时出现错误...

我应该改变什么来切换到开发模式而不是默认的生产模式？非常感谢。

这是 webpack 配置文件：

const webpack = require("webpack");
const path = require("path");
const config = require("sapper/config/webpack.js");
const pkg = require("./package.json");


// const mode = process.env.NODE_ENV;      <- Original line
const mode = "development";      //        <- my attempt
const dev = mode === "production";

const alias = { svelte: path.resolve("node_modules", "svelte") };
const extensions = [".mjs", ".js", ".json", ".svelte", ".html"];
const mainFields = ["svelte", "module", "browser", "main"];

module.exports = {
      client: {
            entry: config.client.entry(),
            output: config.client.output(),
            resolve: { alias, extensions, mainFields },
            module: {
                  rules: [
                        {
                              test: /\.(svelte|html)$/,
                              use: {
                                    loader: "svelte-loader",
                                    options: {
                                          dev,
                                          hydratable: true,
                                          hotReload: false, // pending https://github.com/sveltejs/svelte/issues/2377
                                    },
                              },
                        },
                  ],
            },
            mode,
            plugins: [
                  // pending https://github.com/sveltejs/svelte/issues/2377
                  // dev && new webpack.HotModuleReplacementPlugin(),
                  new webpack.DefinePlugin({
                        "process.browser": true,
                        "process.env.NODE_ENV": JSON.stringify(mode),
                  }),
            ].filter(Boolean),
            devtool: dev && "inline-source-map",
      },

      server: {
            entry: config.server.entry(),
            output: config.server.output(),
            target: "node",
            resolve: { alias, extensions, mainFields },
            externals: Object.keys(pkg.dependencies).concat("encoding"),
            module: {
                  rules: [
                        {
                              test: /\.(svelte|html)$/,
                              use: {
                                    loader: "svelte-loader",
                                    options: {
                                          css: false,
                                          generate: "ssr",
                                          dev,
                                    },
                              },
                        },
                  ],
            },
            mode: process.env.NODE_ENV,
            performance: {
                  hints: false, // it doesn't matter if server.js is large
            },
      },

      serviceworker: {
            entry: config.serviceworker.entry(),
            output: config.serviceworker.output(),
            mode: process.env.NODE_ENV,
      },
};

标签： webpackconfigsapper

解决方案

简短的回答

在webpack.config.js中，更改所有出现的mode: process.env.NODE_ENV,for mode,。然后设置const mode = 'development'为你正在做的。

长答案

发生这种情况是因为mode客户端、服务器和服务工作者的配置不一致。它mode: mode适用于客户端，但mode: process.env.NODE_ENV适用于服务器和服务人员。Webpack 抱怨mode未设置，因为process.env.NODE_ENV未定义。

可选的

您还可以将export脚本修改package.json为类似

  "export": "NODE_ENV='development' sapper export"

然后运行npm run export。

推荐阅读