Модуль не найден: ошибка: не удается разрешить в webpack.common. js - PullRequest
Новая
       65

Модуль не найден: ошибка: не удается разрешить в webpack.common. js

1 голос
/ 28 мая 2020

когда я выполняю npm запуск сборки Я получаю ошибку ниже

ОШИБКА в ./src/assets/scss/theme.scss (./node_modules/css -loader / dist / cjs. js! ./ node_modules / resolve-url-loader! ./ node_modules / sass-loader / dist / cjs. js !. /src/assets/scss/theme.scss) Модуль не найден: Ошибка: не удается разрешить '../../../../fonts/materialdesignicons-webfont.woff?v=4.4.95 'в' D: \ Work \ BBYN \ external \ src \ assets \ s css '@ ./src/assets/scss/theme.scss (./node_modules/css-loader/dist/cjs. js! ./ node_modules / resolve-url-loader! ./ node_modules / sass-loader / dist / cjs. js! ./ src / assets / scss / theme.s css) 7: 36-106 @ ./src/assets/scss/theme.scss @ ./src/extensions/masterApplicationCustomizer/MasterApplicationCustomizerApplicationCustomizer.ts

но если I запустить npm запустить часы все работает правильно

My webpack.commom. js как показано ниже 

const path = require('path')
const merge = require('webpack-merge')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const SetPublicPathPlugin = require('@rushstack/set-webpack-public-path-plugin').SetPublicPathPlugin

module.exports = merge({
    target: 'web',
    entry: {
        'profile-web-part': path.join(__dirname, '../src/webparts/profile/ProfileWebPart.ts'),
        'master-application-customizer-application-customizer': path.join(
            __dirname,
            '../src/extensions/masterApplicationCustomizer/MasterApplicationCustomizerApplicationCustomizer.ts'
        ),
        'list-data-web-part': path.join(__dirname, '../src/webparts/listData/ListDataWebPart.ts')
    },
    output: {
        path: path.join(__dirname, '../dist'),
        filename: '[name].js',
        libraryTarget: 'umd',
        library: '[name]'
    },
    performance: {
        hints: false
    },
    stats: {
        errors: true,
        colors: true,
        chunks: false,
        modules: false,
        assets: false
    },
    externals: [/^@microsoft\//, 'ProfileWebPartStrings', 'ControlStrings', 'MasterApplicationCustomizerApplicationCustomizerStrings', 'ListDataWebPartStrings'],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    transpileOnly: true
                },
                exclude: /node_modules/
            },
            {
                test: /\.(jpg|png|woff|woff2|eot|ttf|svg|gif|dds)$/,
                use: [
                    {
                        loader: '@microsoft/loader-cased-file',
                        options: {
                            name: '[name:lower]_[hash].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: '@microsoft/loader-load-themed-styles',
                        options: {
                            async: true
                        }
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            {
                test: function (fileName) {
                    return fileName.endsWith('.module.scss') // scss modules support
                },
                use: [
                    {
                        loader: '@microsoft/loader-load-themed-styles',
                        options: {
                            async: true
                        }
                    },
                    'css-modules-typescript-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }, // translates CSS into CommonJS
                    'sass-loader' // compiles Sass to CSS, using Node Sass by default
                ]
            },
            {
                test: function (fileName) {
                    return !fileName.endsWith('.module.scss') && fileName.endsWith('.scss') // just regular .scss
                },
                use: [
                    {
                        loader: '@microsoft/loader-load-themed-styles',
                        options: {
                            async: true
                        }
                    },
                    'css-loader', // translates CSS into CommonJS
                    {
                        loader: 'resolve-url-loader'
                    },
                    'sass-loader' // compiles Sass to CSS, using Node Sass by default
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin({
            tslint: true
        }),
        new SetPublicPathPlugin({
            scriptName: {
                name: '[name]_?[a-zA-Z0-9-_]*.js',
                isTokenized: true
            }
        })
    ]
})

1 Ответ

0 голосов
/ 06 июня 2020

Я мог бы решить проблему, используя модуль resolve-url-loader. Это может помочь кому-то. Ниже приводится часть веб-пакета. js

{
test: function (fileName) {
return !fileName.endsWith('.module.scss') && fileName.endsWith('.scss') // just regular .scss
},
use: [
{
loader: '@microsoft/loader-load-themed-styles',
options: {
async: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
}, // translates CSS into CommonJS
'resolve-url-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true
}
} // compiles Sass to CSS, using Node Sass by default
]
}
]
...