Я использую Webpack ^ 4.26.0.Я использовал "extract-text-webpack-plugin" с Webpack 3, прежде чем использовать его для CSS.Но я читал, что этот плагин больше не работает в Webpack 4. И «extract-text-webpack-plugin» предлагает использовать «mini-css-extract-plugin» -plugin.
Iустановил плагин с помощью команды:
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
Структура моей папки: