Загрузчик стилей, похоже, не генерирует тег стиля в теге заголовка моей страницы.Мой код успешно компилируется только с потеплением, которое сообщает
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production'
for this value. Set 'mode' option to 'development' or 'production' to enable
defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more:
https://webpack.js.org/concepts/mode/
i 「wdm」: Compiled with warnings.
Это связано с тем фактом, что я выполняю свой код локально, используя скрипт «webpack-dev-server» в моем файле package.json, который выполняетсямой проект на локальном хосте
i 「wds」: Project is running at http://localhost:8080/
Это мой файл webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
Ниже приведен код в моем файле app.js (моя точка входа)
import './dom-loader';
import '../css/main.css';
import '../css/input-elements.css';
import _ from 'lodash';
var showSecret = false;
secretButton.addEventListener('click', toggleSecretState);
updateSecretParagraph();
function toggleSecretState() {
showSecret = !showSecret;
updateSecretParagraph();
updateSecretButton()
}
function updateSecretButton() {
if (showSecret) {
secretButton.textContent = 'Hide the Secret';
} else {
secretButton.textContent = 'Show the Secret';
}
}
function updateSecretParagraph() {
if (showSecret) {
secretParagraph.style.display = 'block';
} else {
secretParagraph.style.display = 'none';
}
}
element.classList.add('body');
element.classList.add('h1');
Мои импортированные файлы javascipt, кажется, работают нормально, но по некоторым причинам .css файлы не генерируют требуемый тег стиля в заголовке моей страницы.