Question

我尝试为我的vue2应用程序设置webpack配置。它还应该从sass创建css。所以我看看laravel的mix插件来创建我自己的webpack配置。它工作正常，但当我在我的sass文件（@import "~font-awesome/scss/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

现在我使用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

Answer 2

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

webpack不会复制字体文件

2 个答案: