首页 > 解决方案 > Webpack 4 - 模块解析失败:意外字符“”

问题描述

尝试捆绑我的反应应用程序时出错。

未捕获的错误:模块构建失败(来自 ./node_modules/css-loader/index.js):ModuleParseError:模块解析失败:意外字符“”

./src/static/css/main.css 模块构建失败(来自 ./node_modules/css-loader/index.js):ModuleParseError:模块解析失败:意外字符“”

./src/static/fonts/CHILLER.TTF 1:0 模块解析失败:意外字符“”

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [

      {
          test: /\.(png|jp?g|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use : [{
              loader: 'file-loader',
            options: {
                name: '[name].[ext]'
            }}
            ]
      },
      {
        test: /\.(woff|woff2|eot|ttf)?$/,
        loader: 'file-loader',
        options: {
          name: "[name].[ext]"
        }
        },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }

    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ 
      template: './src/index.html', 
      filename: './index.html' 
    }),
    new ExtractTextPlugin('style.css')
  ]
}

标签: webpackwebpack-dev-serverwebpack-style-loader

解决方案


您需要适当的加载器来加载不同的文件类型。对于 CSS,你可以只使用 css-loader 和 style-loader。这是 CSS 加载的工作示例 https://www.codeqna.com/2018/06/working-with-webpack-4-and-npm.html


推荐阅读