Webpack 4 - 模块解析失败:意外字符 ' ' [英] Webpack 4 - Module parse failed: Unexpected character ' '

问题描述

我在尝试捆绑我的 React 应用程序时遇到错误.

I getting erros while trying to bundle my react app.

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

Uncaught Error: Module build failed (from ./node_modules/css-loader/index.js): ModuleParseError: Module parse failed: Unexpected character ' '

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

./src/static/css/main.css Module build failed (from ./node_modules/css-loader/index.js): ModuleParseError: Module parse failed: Unexpected character ' '

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

./src/static/fonts/CHILLER.TTF 1:0 Module parse failed: Unexpected character ' '

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')
  ]
}

推荐答案

这个配置对我有用.网络包 4.16

This config works for me. Webpack 4.16

webpack.config.js

webpack.config.js

   const path = require('path');
    const webpack = require('webpack');

    module.exports = {

        entry: ['babel-polyfill', './src/index.js'],
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                { test: /.css$/, use: ['style-loader', 'css-loader'] },
                {
                    test: /.js?$/,
                    exclude: /(node_modules)/,
                    loader: 'babel-loader',
                    query: {
                        presets: [
                            'env', 'react', 'stage-0'
                        ],
                        plugins: [
                            'transform-class-properties',
                            'transform-decorators-legacy',
                        ]

                    }
                },

            ],
        },
        resolve: {
            alias: {

            }
        },
        stats: 'normal'
    };

src/.babelrc

src/.babelrc

{
    "presets": [
        "env",
        "react",
        "stage-0"
    ],
    "plugins": [
        "transform-class-properties",
        "transform-decorators-legacy",
    ],
    "env": {
        "test": {
            "plugins": [
                "transform-es2015-modules-commonjs"
            ]
        },

    }

这篇关于Webpack 4 - 模块解析失败:意外字符 ' '的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！