Webpack無法解釋檔案？

我正在嘗試將 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

希望這為解決方案提供了足夠的資訊？謝謝！

uj5u.com熱心網友回復：

您缺少處理 CSS 檔案的加載程式。

就像您在module.rules陣列中添加了加載器來處理.js和.tsx檔案一樣，同樣您必須添加適當的檔案加載器來處理.css檔案。

為此，您需要安裝至少兩個 npm 包，css-loader和style-loader。css-loader讀取所有 CSS 檔案并在其中管理匯入、url 路徑、字體匯入。其他手動樣式加載器從 CSS 中獲取 CSS，bundle.js并將其作為單獨的 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'
                ]
            }
        ],
    },
    ...
}

您可以提取 CSS 并將其放在單獨的.css檔案中。

由于 css-loader 在檔案中管理 css，而 style-loader 有助于將其放入 dom 中。如果您想要單獨的 css 檔案，則需要為此添加插件。

你所需要的只是mini-css-extract-plugin。

安裝所需的包

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

將安裝插件配置到 webpack 中。

1. MiniCssExtractPlugin添加由而不是提供的樣式加載器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()
    ],
}

標籤：网页包 巴别塔 webpack-5

上一篇：vue.config.js在生產構建中顯示不同的塊和大小

下一篇：Obsidian.md插件：''黑曜石'未定義'