如何使用Webpack生成仅用于生产的缩小文件

waxmsbnn 于 2023-03-08 发布在 Webpack

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

我想生成一个缩小的CSS文件只为生产与网络包。目前的网络包配置工程，它转换为SCSS的CSS与缩小的代码。
但我不需要在开发过程中缩小CSS。我只需要在生产。我花了很多时间在Webpack和它的我的第五天搞乱了。所以，下面是我正在寻找的结构：

assets/
-/css/
  --index.css (Non Minified for Development with Source Map)
  --index.min.css (Minified for Production)

我目前的Webpack配置如下所示：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemovePlugin = require('remove-files-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    index: "./assets/scss/index.scss",
  }, 
  output: {
    path: path.resolve(__dirname, 'assets')
  },
  
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
    new RemovePlugin({
      after: {
        include: ["./assets/js/style.min.js"]
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [MiniCssExtractPlugin.loader,"css-loader", "sass-loader"]
      }
    ]
  },
};

非常感谢，如果有人可以帮助我与简单的解释，因为Webpack一般似乎是复杂的。简单地说，我需要一个“index.css”没有minified在发展和“index.min.css”minified版本只为生产生成。
希望有人能帮助我。先谢了！

webpack

来源：https://stackoverflow.com/questions/75660161/how-can-i-generate-minified-file-only-for-production-with-webpack

1条答案

按热度按时间

vq8itlhq1#

默认情况下，Webpack在您为生产编译时压缩文件，基本上是在mode键设置为production（如果您没有设置任何键，则为默认值）时。
一种常见的方法是将NODE_ENV=production传递给生产模式的npm脚本，而不传递给开发模式的任何脚本，例如：

"scripts": {
  "start": "...",
  "build": "NODE_ENV=production webpack"
},

如果您使用的是安装了Windows操作系统的计算机：

"scripts": {
  "start": "...",
  "build": "SET NODE_ENV=production&webpack"
},

并在webpack.config.js中使用它来调整mode键值，从而调整输出文件，类似于：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemovePlugin = require("remove-files-webpack-plugin");

//👇🏽
const mode = process.env.NODE_ENV === "production" ? "production" : "development"; 

module.exports = {
  //👇🏽
  mode: mode,
  entry: {
    index: "./assets/scss/index.scss",
  },
  output: {
    path: path.resolve(__dirname, "assets"),
  },

  plugins: [
    new MiniCssExtractPlugin({
      //👇🏽
      filename: mode === "production" ? "css/[name].min.css" : "css/[name].css", 
    }),
    new RemovePlugin({
      after: {
        include: ["./assets/js/style.min.js"],
      },
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
};

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

我来回答

如何使用Webpack生成仅用于生产的缩小文件

1条答案

相关问题

热门标签

最新问答