Webpack 4 узловых модуля css - Синтаксическая ошибка: неожиданный токен. (Точка) - PullRequest
Новая
       31

Webpack 4 узловых модуля css - Синтаксическая ошибка: неожиданный токен. (Точка)

0 голосов
/ 22 февраля 2019

Я пытаюсь изменить мой реагирующий рендеринг на стороне клиента проекта на рендеринг на стороне сервера.

Возникла проблема при использовании конфигурации webpack на css, которая хорошо используется в моем исходном проекте (рендеринг на стороне клиента)).

Это хорошо сработало при сборке, но при выполнении возвращает синтаксическую ошибку 


/home/choiyeonsuk/web/ssr-tutorial/ssr-wis/node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css:1
(function (exports, require, module, __filename, __dirname) { .react-bs-table .react-bs-container-header .sort-column,.s-alert-close,td.react-bs-table-expand-cell,th.react-bs-table-expand-cell>div{cursor:pointer}.react-bs-table-container .react-bs-table-search-form{margin-bottom:0}.react-bs-table-bordered{border:1px solid #ddd;border-radius:5px}.react-bs-table table{margin-bottom:0;table-layout:fixed}.react-bs-table table td,.react-bs-table table th{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.react-bs-table-pagination{margin-top:10px}.react-bs-table-tool-bar{margin-bottom:5px}.react-bs-container-footer,.react-bs-container-header{overflow:hidden;width:100%}.react-bs-container-body{overflow:auto;width:100%}.react-bootstrap-table-page-btns-ul{float:right;margin-top:0}.react-bs-table .table-bordered{border:0;outline:0!important}.react-bs-table .table-bordered>thead>tr>td,.react-b

SyntaxError: Unexpected token .
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:686:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:659:17)
    at require (internal/modules/cjs/helpers.js:22:18)

Я использую webpack4 & babel7.

Это мой webpack.config.js. 

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const serverConfig = {
  mode: 'development',
  target: 'node',
  node: {
    __dirname: false,
  },
  externals: [nodeExternals()],
  entry: {
    'index.js': path.resolve(__dirname, 'src/server.js'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader',
        options: {
          outputPath: './fonts/',
          name: '[hash].[ext]',
        },
      },
      {
        test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
        loader: 'file-loader',
        options: {
          outputPath: './img/',
          name: '[name].[hash].[ext]',
        },
      },
      {
        test: /\.css$/,
        use: [
          'css-loader',
        ],
      },
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]',
  },
};

const clientConfig = {
  mode: 'development',
  target: 'web',
  entry: {
    'client.js': path.resolve(__dirname, 'src/index.js'),
    'bundle.js': path.resolve(__dirname, 'src/containers/App.js'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader',
        options: {
          outputPath: './fonts/',
          name: '[hash].[ext]',
        },
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
        loader: 'file-loader',
        options: {
          outputPath: './img/',
          name: '[name].[hash].[ext]',
        },
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ]
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: '[name]'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].bundle.[hash].css'
    })
  ]
}

module.exports = [serverConfig, clientConfig];

И babel.config.js 

const presets = ['@babel/preset-env', '@babel/preset-react'];
const plugins = [
  require('@babel/plugin-proposal-class-properties'),
  require('@babel/plugin-proposal-object-rest-spread'),
  require('@babel/plugin-transform-destructuring'),
  require('@babel/plugin-transform-runtime'),
];

module.exports = {
  presets,
  plugins,
};

Я думаю, что это вызвано тем, что webpack nodeExternals не исключает node_modules хорошо ...

Какисправить это?

1 Ответ

0 голосов
/ 13 апреля 2019

если вы импортируете css для каждого компонента, вы можете настроить модули CSS, чтобы избежать наложения имен классов.

Вот соответствующая ссылка .

...