Sapper Webpack 警告: 'mode' 选项未设置。

Question

我不是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,
      },
};

- 16ar

Answer 1

简短回答

在webpack.config.js中，将所有出现的 mode: process.env.NODE_ENV, 替换为 mode,。接着设置 const mode = 'development'。

详细回答

这是因为mode在客户端、服务器和服务工作者的配置中使用不一致。对于客户端来说是mode: mode，但对于服务器和服务工作者来说是mode: process.env.NODE_ENV。Webpack报错说未定义mode，是因为process.env.NODE_ENV未定义。

可选项

您还可以修改package.json中的export脚本，例如：

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

然后运行npm run export。

- Carlos Roso