Webpack找不到模块mini-css-extract-plugin

Question

我正在使用Webpack ^ 4.26.0。我之前在Webpack 3中使用了“ extract-text-webpack-plugin”来用于CSS。但是我已经读到该插件在Webpack 4上不再起作用。“ extract-text-webpack-plugin”建议使用“ mini-css-extract-plugin” -plugin。

我已经通过以下命令安装了插件：

  

npm install --save-dev mini-css-extract-plugin

并需要webpackconfig中的插件，也将其添加到我的规则和插件中：

// webpack.config.js
const webpack = require("webpack");
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
  context: path.resolve(__dirname),
  entry: "./index.js",
  devServer: {
    contentBase: "./dist"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname),
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [["@babel/env", { modules: false }], "@babel/react"]
            }
          }
        ]
      },
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader"
      },
      {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, "css-loader"]
       }
    ],
    noParse: [/aws-sdk/]
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
      "process.env.STATIC_PORT": JSON.stringify(process.env.STATIC_PORT),
      VERSION: JSON.stringify(require("./package.json").version)
    }),
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    }),
    new CopyWebpackPlugin([{ from: "./cb_icons", to: "cb_icons" }])
  ],
  node: { fs: "empty" },
  externals: [{ "./cptable": "var cptable" }, { "./jszip": "jszip" }]
};

module.exports = config;

但是我遇到以下错误：

它已安装在我的node_modules中：

  

components / searchkit / node_modules / mini-css-extract-plugin

我的文件夹结构：

Answer 1

我有与此完全相同的问题。我收到此错误的原因是因为package.json文件中缺少webpack.config.js中引用的dev依赖项。

因此，例如在OP的情况下，devDependencies中需要包含的某些内容将是babel-loader，awesome-typescript-loader，css-loader等。仔细检查所有这些都在devDependencies中。

Answer 2

  

默认情况下，Heroku将安装package.json中列出的所有依赖项，这些依赖项均位于dependencies和devDependencies下。在运行安装和构建步骤之后，Heroku将在部署应用程序之前剥离在devDependencies下声明的软件包。

来源：https://devcenter.heroku.com/articles/nodejs-support

如果在运行时需要devDependencies，则可以将其卸载并安装为运行时依赖项，也可以将heroku环境变量设置为从修剪devDependencies撤消。

在命令行中，它看起来像这样：

  heroku config:set NPM_CONFIG_PRODUCTION=false

Answer 3

如果显示模块错误，则检查您的导入或要求模块如..

var mini-css-extract-plugin = require（“ mini-css-extract-plugin”）

Answer 4

如果您已经安装了该软件包并且可以在 package.json 文件（在 devDependencies 下）中看到它，您可能只需要使用以下命令将全局安装的软件包链接到您的项目。

npm link mini-css-extract-plugin