如何使用 webpack 4 和 mini-css-extract-plugin 生成 css 文件？答案

【问题标题】：How do I generate a css file using webpack 4 and mini-css-extract-plugin?如何使用 webpack 4 和 mini-css-extract-plugin 生成 css 文件？
【发布时间】：2019-02-22 23:54:58
【问题描述】：

我能够让 min-css-extract-plugin top 生成 css 文件很好，但我似乎无法让它与 SASS 一起使用。当我使用 webpack 开发服务器时，它运行良好，但它不断将我的 scss 插入到我的 javascript 文件中，而不是创建单独的 CSS 文件。

我有 index.html、index.js 和 main.scss 存储在 /src 下

webpack.config.js：

const MiniCssExtractPlugin = require("mini-css-extract-plugin")


module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // fallback to style-loader in development
          process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
      ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
}

【问题讨论】：

你的 index.js 文件里有什么？
构建是否在您的输出文件夹中创建 CSS 文件？如果是这样，您可能只需要使用 HtmlWebpackPlugin 将其加载到 index.html 中。 css 在开发服务器上运行良好，因为 style-loader 将其作为页面顶部的

标签： webpack webpack-dev-server mini-css-extract-plugin

【解决方案1】：

要让mini-css-extract-plugin 实际将您的 CSS 提取到一个单独的文件中，您需要将您的 CSS（或其他扩展名）导入一个 entry 文件（在您的情况下为 index.js）。此外，使用 process.env.NODE_ENV 的值来确定 Webpack 配置中的开发或生产设置实际上不起作用。

来自 Webpack 的production configuration guide：

与预期相反，process.env.NODE_ENV 未设置为 "production"在构建脚本 webpack.config.js，请参阅 #2537。因此，webpack 配置中的process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js' 之类的条件不能按预期工作。

您需要编写不带style-loader 的CSS 规则以使mini-css-extract-plugin 的加载器生效：

{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    "sass-loader"
  ]
}

然后，由于您从规则中删除 style-loader，您需要为生产和开发创建单独的 Webpack 配置，以便您可以在开发中使用它。

【讨论】：