@Jirafek

Как исправить You may need an appropriate loader to handle this file type, currently no loaders are config?

Мне даёт такую ошибку три раза, как я понимаю из-за css файлов.

Ошибка:
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/configuration/mode/

ERROR in ./src/components/view/news/news.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .news__item {
| display: flex;
| flex-direction: column;
@ ./src/components/view/news/news.ts 1:0-20
@ ./src/components/view/appView.ts 1:0-31 5:24-28
@ ./src/components/app/app.ts 2:0-38 6:24-31
@ ./src/index.ts 1:0-39 3:14-17

ERROR in ./src/components/view/sources/sources.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .sources {
| display: flex;
| flex-wrap: wrap;
@ ./src/components/view/sources/sources.ts 1:0-23
@ ./src/components/view/appView.ts 2:0-40 6:27-34
@ ./src/components/app/app.ts 2:0-38 6:24-31
@ ./src/index.ts 1:0-39 3:14-17

ERROR in ./src/global.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body {
| color: #fff;
| background: #17181c;
@ ./src/index.ts 2:0-22


Webpack.config.js:
const path = require('path');
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const baseConfig = {
    entry: path.resolve(__dirname, './src/index.js'),
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js'],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, '../dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
        }),
        new CleanWebpackPlugin(),
    ],
};

module.exports = ({ mode }) => {
    const isProductionMode = mode === 'prod';
    const envConfig = isProductionMode ? require('./webpack.prod.config') : require('./webpack.dev.config');

    return merge(baseConfig, envConfig);
};

module.exports = {
    entry: './src/index.ts',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };


tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist/",
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}

Если ещё что нужно - скину.
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
У Вас последний module.exports = перетирает Ваши предыдущие конфиги
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы