Блог

Я настраиваю Webpack в существующем проекте, и я избегал изменения структуры проекта. В файлах scss у меня есть включения, начинающиеся с / (например, url(‘/fonts/mem.woff2’)), и я считаю, что это причина моей проблемы.

styles.scss

 @font-face {
    font-family: 'MyFont';
    src: url('/fonts/mem.woff2') format('woff2'),
      url('/fonts/slick.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
 

И ошибка:

Ошибка: Не удается разрешить ‘/fonts/mem.woff2’ в ‘D:ProgrammingDemoswebpack-compactsrc » в конце концов , без разрешения (D:ProgrammingDemoswebpack-compactnode_modulesenhanced-resolvelibResolver.js:293:18 ) в D:ProgrammingDemoswebpack-compactnode_modulesenhanced-resolvelibResolver.js:362:15 в D:ProgrammingDemoswebpack-compactnode_modulesenhanced-resolvelibResolver.js:410:5 при оценке (оценка при создании (D:ProgrammingDemoswebpack-compactnode_modulesenhanced-resolvenode_modulestapablelibHoo в D:ProgrammingDemoswebpack-compactnode_modulesenhanced-resolvelibResolver.js:410:5 при оценке (оценка при создании (D:ProgrammingDemoswebpack-compactnode_modulesenhanced-resolvenode_modulestapablelibHoo в D:ProgrammingDemoswebpack-compactnode_modulesenhanced-resolvelibDescriptio в D:ProgrammingDemoswebpack-compactnode_modulesenhanced-resolvelibResolver.j при оценке (оценка при создании (D:ProgrammingDemoswebpack-compactnode_modulesenhanced — в D:ProgrammingDemoswebpack-compactnode_modulesenhanced-resolvelibResolver.j

Мой файл webpack выглядит следующим образом:

 module.exports = env => {
const isDev = env.NODE_ENV == 'dev';

return {
    target: 'web',
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {            
        index: path.resolve(__dirname, "src", "index.js")
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),            
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: '8080',
        host: 'localhost',
        hot: true,
        open: true,
        inline: true
    },
    plugins: [
        new CleanWebpackPlugin(),            
        new HtmlWebpackPlugin({
            title: 'Development',
            template: path.resolve(__dirname, "src", "index.html"),
            filename: 'index.html',
        })
    ],
    module:{
        rules: [               
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/',
                },
            }
            ...
 

Я знаю, что если я изменю путь к шрифту на этот с помощью ./, это сработает. Мой вопрос в том, можно ли изменить только конфигурацию webpack вместо того, чтобы переходить ко всем файлам scss и изменять путь по url (‘/ fonts/mem.woff2’)?

Я считаю, что это возможно с webpack.NormalModuleReplacementPlugin помощью .

Вот как вы можете это сделать:

 plugins: [
 //…
 new webpack.NormalModuleReplacementPlugin(
      /^/fonts/mem.woff2/,
      function (resource) {
        resource.request = resource.request.replace(/^//, './');
      }
    )
]
 

Поскольку в вашем примере используется два шрифта, вы можете применить другой webpack.NormalModuleReplacementPlugin плагин.