在webpack配置文件中分别包含开发模式和生产模式的规则

ffscu2ro 于 2023-08-06 发布在 Webpack

关注(0)|答案(1)|浏览(117)

我正在做一个使用html的前端项目。在我的项目中，我使用Webpack模块捆绑器。我使用image-webpack-loader包优化镜像。现在的问题是，当我运行开发服务器时，它image-webpack-loader也会在每次更改时运行，这需要更多的加载时间。我只想在生产中使用它。如果没有其他软件包的帮助，我怎么能做到这一点呢？这是我的第一个webpack项目。如果有人在这件事上帮助我，我会很高兴的。先谢了。
这是我的webpack.config.js文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const glob = require("glob");

module.exports = {
    mode: "production",
  entry: "./src/js/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    watchFiles: ["src/**/*"],
    compress: true,
    port: 3000,
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico|eot|ttf|woff)$/i,
        type: "asset",
        **use: [
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: true,
                optimizationLevel: 7,
              },
              pngquant: {
                quality: [0.6, 0.8],
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },**
        generator: {
          filename: "images/[name]-[hash][ext]",
        },
      },
    ],
  },
  plugins: [
    ...glob.sync("./src/**/*.html").map((file) => {
      return new HtmlWebpackPlugin({
        template: file,
        filename: path.basename(file),
        chunks: ["main"],
      });
    }),
  ],
};

字符串
这就是我说的问题

use: [
  {
    loader: "image-webpack-loader",
    options: {
      mozjpeg: {
        progressive: true,
        quality: 65,
      },
      optipng: {
        enabled: true,
        optimizationLevel: 7,
      },
      pngquant: {
        quality: [0.6, 0.8],
      },
      gifsicle: {
        interlaced: false,
      },
      webp: {
        quality: 75,
      },
    },
  },
],
parser: {
  dataUrlCondition: {
    maxSize: 10 * 1024,
  },
},

型
请编辑这为生产和发展，以便我可以使用它到相同的文件

{
        test: /\.(png|jpe?g|gif|svg|ico|eot|ttf|woff)$/i,
        type: "asset",
        **use: [
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: true,
                optimizationLevel: 7,
              },
              pngquant: {
                quality: [0.6, 0.8],
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },**
        generator: {
          filename: "images/[name]-[hash][ext]",
        },
      }

型

webpack

来源：https://stackoverflow.com/questions/76753907/including-rules-for-development-and-production-mode-separately-in-the-webpack-co

1条答案

按热度按时间

txu3uszq1#

选项1.为每个环境单独配置webpack。
请参阅Production最佳实践：
我们通常建议为每个环境编写单独的webpack配置。
虽然我们将把生产和开发特定的部分分离出来，但请注意，我们仍将维护一个“公共”配置，以保持内容干燥。为了将这些配置合并在一起，我们将使用一个名为webpack-merge的实用程序。有了“公共”配置，我们就不必在特定于环境的配置中重复代码。
因此，image-webpack-loader将仅在webpack.prod.js文件中使用。webpack.prod.js文件用于生产构建。
对于本地开发，您不需要在webpack.dev.js文件中包含这个加载器。
选项2.使用disable选项
我们需要在webpack.config.js文件中使用环境变量
webpack.config.js：

module.exports = (env) => {
    console.log(env.imageLoaderDisable, typeof JSON.parse(env.imageLoaderDisable));

    return {
        mode: 'development',
        entry: './src/index.js',
        module: {
            rules: [
                {
                    test: /\.(gif|png|jpe?g|svg)$/i,
                    use: [
                        'file-loader',
                        {
                            loader: 'image-webpack-loader',
                            options: {
                                disable: JSON.parse(env.imageLoaderDisable),
                            },
                        },
                    ],
                },
            ],
        },
    };
};

字符串
CLI：

$ npx webpack --env imageLoaderDisable=true

型

赞(0）回复(0）举报 2023-08-06

我来回答

在webpack配置文件中分别包含开发模式和生产模式的规则

1条答案

相关问题

热门标签

最新问答