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

waxmsbnn  于 2023-03-08  发布在  Webpack
关注(0)|答案(1)|浏览(184)

我想生成一个缩小的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版本只为生产生成。
希望有人能帮助我。先谢了!

vq8itlhq

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"],
      },
    ],
  },
};

相关问题