Question

当我尝试运行 Webpack 时，它抛出一个错误：

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| .k-theme-test-class,
| .k-common-test-class {
 @ ./src/App.js 19:0-52
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

起初我以为问题是 @ 符号，后来我意识到它甚至不应该贯穿 node_modules，对吗？

我的 webpack.config.js 是：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const PrettierPlugin = require('prettier-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  entry: ['@babel/polyfill', './src/index.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: '/',
  },
  devServer: {
    historyApiFallback: true,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.s?css$/,
        exclude: /node_modules/,
        oneOf: [
          {
            test: /\.module\.s?css$/,
            exclude: /node_modules/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    localIdentName: '[name]__[local]___[hash:base64:5]',
                  },
                  sourceMap: true,
                },
              },
              { loader: 'sass-loader' },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [['autoprefixer', {}]],
                  },
                },
              },
            ],
          },
          {
            exclude: /node_modules/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=10000&name=img/[name].[ext]',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '/src/index.html'),
      filename: 'index.html',
      inject: 'body',
    }),
    new ESLintPlugin(),
    new MiniCssExtractPlugin(),
    // new PrettierPlugin({
    //   configFile: '.prettierrc',
    // }),
  ],
};

如果我删除 3 个与 css 相关的 exclude:，我会收到以下错误：

ERROR in ./node_modules/@progress/kendo-theme-default/dist/all.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Internal Error: Incompatible units: 'px' and 'em'.

    at C:\www\Svila\SvilaReact\svila-erp\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\www\Svila\SvilaReact\svila-erp\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\www\Svila\SvilaReact\svila-erp\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\www\Svila\SvilaReact\svila-erp\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.callback (C:\www\Svila\SvilaReact\svila-erp\node_modules\sass-loader\dist\index.js:62:7)
    at Object.done [as callback] (C:\www\Svila\SvilaReact\svila-erp\node_modules\neo-async\async.js:8069:18)
    at options.error (C:\www\Svila\SvilaReact\svila-erp\node_modules\node-sass\lib\index.js:293:32)
 @ ./src/App.js 19:0-52
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

罪魁祸首是： border-width: max( 1px, .015em );。这是无效的 sass 并且通常可以通过使用 calc border-width: calc(max( 1px, .015em )); 包裹来修复，如前所述 here

所以我有以下按重要性排序的问题：

既然该文件有 exclude: /node_modules/，为什么要通过加载程序通过管道传送？
来自外部库的文件是否应该通过 Webpack 中的加载器/插件进行管道传输，或者他们是否有其他方式将自己包含在开发/生产版本中？
为什么 babel-loader 的 .js 不包括 /node_modules/ 而不是 s?css？（我看到随机 webpack.config.js 文件有这种趋势）
有趣的是，根据万维网联盟，罪魁祸首行 margin-left: calc(24px + 1em); 实际上是一个有效的 css。这让我想知道 - 一个普通的 css 是否应该通过 sass-loader 进行管道传输？也许这并不完全正确，或者是这样？
修复它的正确方法是什么？

Webpack 为 node_modules 中的文件抛出错误

0 个答案: