Webpack 无法解释文件？

Question

我正在尝试将 webpack 与 react 和 ts 结合使用，以便优化我的网站，但是我遇到了 webpack 的绊脚石。下面是我的 webpack.config.js 文件，我认为它是正确的，但也许不正确？下面是错误的图片。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.resolve(__dirname, '..', './src/index.tsx'),
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.js|\.tsx$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                ],
            },
        ],
    },
    output: {
        path: path.resolve(__dirname, '..', './build'),
        filename: 'bundle.js',
    },
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '..', './src/index.html'),
        }),
    ],
}

CSS 和 webp 文件会发生这种情况，但您只能在屏幕截图中看到 CSS。

文件结构是这样的：

- build
- src
    - App.tsx
    - index.tsx
    - index.html
    - react-app-env.d.ts
    - css
        - animations.css
        - App.css
        - index.css
        - nav.css
    - images
        - hero.webp
        - image1.webp
        - logo.webp
    - webpack
        - webpack.config.js
    - .babel.rc
    - package.json
    - tsconfig.json
    - yarn.lock

希望这能为解决方案提供足够的信息？谢谢！

Answer 1

您缺少处理 CSS 个文件的加载程序。

就像你在 module.rules 数组中添加加载器来处理 .js 和 .tsx 文件一样，同样你必须添加适当的文件加载器来处理 .css 文件。

为此你至少需要安装两个 npm 包，css-loader 和 style-loader。 css-loader reads all CSS files and manages imports, url path, font imports within it. Other the hand style-loader 从 bundle.js 获取 CSS 并将其作为单独的 CSS 文件放入 DOM。

安装所需的加载程序。

npm install style-loader css-loader --save-dev

将已安装的加载器配置到 webpack 中。

module.exports = {
    ...,
    module: {
        rules: [
            {
                test: /\.js|\.tsx$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ],
    },
    ...
}

You can extract CSS and put it separate .css file.

As css-loader manages css within files and style-loader helps to put it in dom. If you want separate css file, you need to add plugin for that.

你只需要 mini-css-extract-plugin.

安装所需的包

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

配置安装插件到 webpack。

1. 添加 MiniCssExtractPlugin 提供的 style-loader 而不是 style-loader，将 style-loader 更改为 MiniCssExtractPlugin.loader。

2. 将 MiniCssExtractPlugin 添加到插件数组。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: path.resolve(__dirname, '..', './src/index.tsx'),
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.js|\.tsx$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ],
    },
    output: {
        path: path.resolve(__dirname, '..', './build'),
        filename: 'bundle.js',
    },
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '..', './src/index.html'),
        }),
        new MiniCssExtractPlugin()
    ],
}