webpack 不复制字体文件

Question

我尝试为我的 vue2 应用程序设置一个 webpack 配置。它还应该从 sass 创建 css。所以我看了一下 laravel 的 mix 插件来创建我自己的 webpack 配置。它工作正常，但是当我在我的 sass 文件 (@import "~font-awesome/scss/font-awesome";) 中包含 font awesome 时，我得到这个错误：

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in '[PATH]\client\styles'

Webpack 应该像 laravel-mix 一样自动将 FA 字体文件复制到 [PATH]\client\fonts\。我尝试了很多解决方案，但没有一个有效。我的 webpack.config.js 看起来像：

const path = require('path'),
    webpack = require('webpack'),
    ExtractTextPlugin = require("extract-text-webpack-plugin"),
    FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin"),
    postCssOptions = [require('autoprefixer')];

module.exports = {
    entry: {
        'main': [
          './client/scripts/main.js',
          './client/styles/main.scss'
        ]
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        publicPath: './',
        filename: 'js/[name].js'
    },
    resolve: {
        extensions: [ '*', '.js', '.vue' ],
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            'vue-router$': 'vue-router/dist/vue-router.common.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        js: 'babel-loader?presets[]=es2015',
                        scss: ExtractTextPlugin.extract({
                            use: 'css-loader!sass-loader',
                            fallback: 'vue-style-loader'
                        }),
                        sass: ExtractTextPlugin.extract({
                            use: 'css-loader!sass-loader?indentedSyntax',
                            fallback: 'vue-style-loader'
                        }),
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        }),
                        postcss: postCssOptions
                    }
                }
            },

            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            },

            {
                test: /\.s[ac]ss$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader!sass-loader',
                    fallback: 'style-loader'
                })
            },

            {
                test: /\.html$/,
                loaders: ['html-loader']
            },

            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'file-loader',
                options: {
                    name: 'images/[name].[ext]?[hash]'
                }
            },

            {
                test: /\.(woff2?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]?[hash]'
                }
            }
        ]
    },
    devtool: '#source-map',
    plugins: [
        new ExtractTextPlugin({
            filename: "./css/[name].css",
            allChunks: true
        }),
        new FriendlyErrorsWebpackPlugin ({
            shouldClearConsole: true
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: isProduction,
            options: {
                postcss: postCssOptions,
                context: __dirname,
                output: { path: './' }
            }
        })
    ]
}

Answer 1

请使用 url-loader 来处理这些类型的文件。 https://github.com/webpack-contrib/url-loader

Answer 2

现在我使用 resolve-url-loader 解决了 sass/scss 文件的加载程序，所以我有：

            {
                test: /\.s[ac]ss$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader!resolve-url-loader!sass-loader?sourceMap',
                    fallback: 'style-loader'
                })
            },

            {
                test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]?[hash]',
                    publicPath: '/'
                }
            }

记住，将 ?sourceMap 添加到 sass 加载器 https://www.npmjs.com/package/resolve-url-loader

webpack 不复制字体文件

webpack doesn't copy font files

sass

font-awesome

webpack

extract-text-plugin