プロジェクトを webpack しようとすると、このエラー<link rel=stylesheet href=[object Object]>
my expected output for CSS styles が 表示されます./styles.css
。私はwebpackを初めて使用します。この問題を解決するために誰か助けてください。前もって感謝します。
ここに私が取り組んでいる私のファイルがあります:
webpack.config.common.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js',
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new CleanWebpackPlugin(),
// new HtmlWebpackPlugin({
// filename: 'index.html',
// inject: true,
// template: path.resolve(__dirname, 'src', 'index.html'),
// }),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /[\\/]node_modules[\\/]/,
use: {
loader: 'babel-loader',
},
},
],
},
};
Index.js ファイル
import './index.css';
import styles from './css/bootstrap.min.css';
import customstyles from './scss/main.css';
import html from './index.html';
webpack.config.prod.js
const commonConfig = require('./webpack.config.common');
const merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');
const ImageminWebP = require('imagemin-webp');
module.exports = merge(commonConfig, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
{
test: /\.html$/i,
use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
// Image Compression
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65,
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.9],
speed: 4,
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75,
},
},
},
],
},
],
},
plugins: [
//new HtmlWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new ImageminWebpWebpackPlugin({
plugins: [
ImageminWebP({
quality: 75,
}),
],
}),
],
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin({
cssProcessorOptions: {
map: {
inline: false,
annotation: true,
},
},
}),
new TerserPlugin({
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: true,
}),
],
},
});
インストールしたプラグインのリスト:
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@fullhuman/postcss-purgecss": "^2.1.0",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"extract-loader": "^5.0.1",
"file-loader": "^6.0.0",
"html-loader": "^1.0.0",
"html-webpack-plugin": "^4.0.3",
"image-webpack-loader": "^6.0.0",
"imagemin": "^7.0.1",
"imagemin-webp": "^5.1.0",
"imagemin-webp-webpack-plugin": "^3.3.1",
"imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"purgecss-webpack-plugin": "^2.1.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"terser-webpack-plugin": "^2.3.5",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2"
よろしくお願いします