未找到模块：错误：无法在 webpack.common.js 中解析

Posted 2023-02-22

【中文标题】未找到模块：错误：无法在 webpack.common.js 中解析

【英文标题】：Module not found: Error: Can't resolve in webpack.common.js

【发布时间】：2020-09-16 06:54:43

【问题描述】：

当我执行 npm run build 时出现以下错误

./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\scss' @ ./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 ) 7:36-106 @ ./src/assets/scss/theme.scss @ ./src/extensions/masterApplicationCustomizer/MasterApplicationCustomizerApplicationCustomizer.ts

但如果我 运行 npm run watch 它可以正常工作

我的 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】：

我可以通过使用 resolve-url-loader 模块来解决这个问题。它可以帮助某人以下是 webpack.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
]

]