在 webpack 失败中排除 CSS 路径

Question

config/webpack.dev.config.js:

/**
 * module dependencies for webpack dev configuration
 */
const path = require('path');
const webpack = require('webpack');

// define paths
const nodeModulesPath = path.resolve(__dirname, '../node_modules');
const buildPath = path.resolve(__dirname, '../public', 'build');
const mainAppPath = path.resolve(__dirname, '../frontend', 'App', 'index.js');
const sharedStylesPath = path.resolve(__dirname, '../frontend', 'SharedStyles');
const componentsPath = path.resolve(__dirname, '../frontend', 'Components');
const containersPath = path.resolve(__dirname, '../frontend', 'Containers');
const viewsPath = path.resolve(__dirname, '../frontend', 'Views');

const editorPath = path.resolve(__dirname, '../frontend/Components/MyEditor');

/**
 * webpack development configuration
 */
module.exports = {
  target  : 'web',
  devtool: 'inline-source-map',

  entry: [
    'webpack-hot-middleware/client',
    mainAppPath,
  ],

  output: {
    filename: 'bundle.js',
    path: buildPath,
    publicPath: '/build/',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel-loader' ],
        exclude: [nodeModulesPath],
      },
      {
        test: /\.css$/,
        exclude: [editorPath],
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap=inline',
        ],
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
    ],
  },

  postcss: [ require('autoprefixer'), require('postcss-nesting') ],

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],

  resolve : {
    extensions: ['', '.js', '.css'],
    alias: {
      SharedStyles: sharedStylesPath,
      Components: componentsPath,
      Containers: containersPath,
      Views: viewsPath,
    },
  },
};

frontend/Components/MyEditor/index.js:

import React, { Component } from 'react';

import { Editor } from 'react-draft-wysiwyg';
import './editor.css'; // this cause an error because global CSS doesn't work by webpack

class MyEditor extends Component {
    render() {
        return (
            <div>
           <Editor />
            </div>
        );
    }
}

export default MyEditor;

错误：

ERROR in ./frontend/Components/MyEditor/editor.css
Module parse failed: /home/mycomputer/ReForum/frontend/Components/MyEditor/editor.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp.raise (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.parseExprAtom (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp.parseExprSubscripts (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp.parseMaybeUnary (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp.parseExprOps (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp.parseMaybeConditional (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp.parseMaybeAssign (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp.parseExpression (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp.parseStatement (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp.parseTopLevel (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/home/mycomputer/ReForum/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.provide (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.readFile (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
    at NormalModule.onLoadPitchDone (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
    at NormalModule.loadPitch (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
 @ ./frontend/Components/MyEditor/index.js 17:0-23
webpack: Failed to compile.

我尝试从 webpack css-loader 中排除 "frontend/Components/MyEditor/editor.css" 文件，这样我就可以通过将 "import './editor.css';" 放入任何 js 文件来应用全局 css。

但目前会导致模块解析失败的错误。

在 webpack 配置中，我输入 "exclude: [editorPath]" and "const editorPath = path.resolve(__dirname, '../frontend/Components/MyEditor');".

所以我认为这是正确的，但它不起作用。我该如何解决这个问题？

Answer 1

因为您从 css-loader 中排除了 css 文件。所以 webpack 不知道如何处理这个文件。您需要为该文件编写一个新的模块加载器。

 module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel-loader' ],
        exclude: [nodeModulesPath],
      },
      {
        test: /\.css$/,
        exclude: [editorPath],
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap=inline',
        ],
      },
      {
        test: /\.css$/,
        include: [editorPath],
        loaders: [
          'css-loader',
        ],
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
    ],
  },

在 webpack 失败中排除 CSS 路径

Excluding CSS path in webpack failure

reactjs

webpack

webpack-4