javascript - webpack4 copy-webpack-plugin 错误：意外字符'@'

Question

我已经完成了 SO 问题，答案似乎只与 CSS/SASS 模块规则有关。

我只是想将文件（保留文件夹结构）从src复制到public，没有散列等，所以我使用 CopyWebpackPlugin - 与 Webpack 3 中的相同

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        path: path.join(__dirname,'/public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // plugins: ['transform-runtime'],
                        // presets: ['es2015','react']
                        // plugins: ['transform-class-properties']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: ["style-loader","css-loader","sass-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['public']),

        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),

        new CopyWebpackPlugin([
        {from: 'images', to: 'images' },
            {context: 'images', from: '**/*', to: 'images' },
            {context: 'vendor', from: '**/*', to: 'vendor' },
            {context: 'data', from: '**/*', to: 'data' }
        ]),
    ]
};

有几个图像文件夹存储在 src/images/**.* 上面的 CopyWebpackPlugin 设置在 Webpack3 中运行良好，但我不断收到此错误：

./src/images/logos/logo-gs_transp-LT.png 中的错误 1:0 模块解析失败：意外字符 '�' (1:0) 您可能需要适当的加载程序来处理此文件类型。

标签： javascriptwebpack-4

Answer 1

您需要添加一个加载器来处理图像文件类型。例如：

module: {
  rules: [{
   test: /\.(png|svg|jpe?g|gif|ico)$/,
   loader: 'file-loader',
  }]
}