Question

当我在我的webpack应用程序中运行构建或监视时，它会在尝试解析macOS .DS_Store元数据文件时抛出异常。如何配置它以忽略这些文件？

ERROR in ./assets/preview/.DS_Store
Module parse failed: /Users/greg/projects/maven_book/assets/preview/.DS_Store Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:0)
    at Parser.pp$4.raise (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.parse (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:515:10)
    at Object.parse (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/greg/projects/maven_book/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/Users/greg/projects/maven_book/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/Users/greg/projects/maven_book/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/greg/projects/maven_book/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/greg/projects/maven_book/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/greg/projects/maven_book/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/greg/projects/maven_book/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:416:3)

这是我的完整webpack配置：

var path = require('path');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');

var rootAssetPath = './assets';

module.exports = {
  context: __dirname,
  entry: {
    main_js: [
      rootAssetPath + '/j/main.js'
    ],
    main_css: [
      rootAssetPath + '/c/main.scss'
    ]
  },
  output: {
    path: './build/assets',
    publicPath: 'http://localhost:2992/assets/',
    filename: '[name].[chunkhash].js',
    chunkFilename: '[id].[chunkhash].js'
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js', '.scss']
  },
  module: {
    loaders: [
      {
        test: /\.js$/i,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/i,
        loader: ExtractTextPlugin.extract('style')
      },
      {
        test: /\.scss$/i,
        loader: ExtractTextPlugin.extract(
                    'style',
                    'css?sourceMap!sass?sourceMap'
                )
      },
      {
        test: /\.(jpe?g|png|gif|svg([\?]?.*))$/i,
        loaders: [
          'file?context=' + rootAssetPath + '&name=[path][name].[hash].[ext]',
          'image?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        // loader: 'file?name=public/fonts/[name].[ext]'
        loader: 'file?context=' + rootAssetPath + '&name=[path][name].[hash].[ext]'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].[chunkhash].css'),
    new ManifestRevisionPlugin(path.join('build', 'manifest.json'), {
      rootAssetPath: rootAssetPath,
      ignorePaths: ['/c', '/j']
    })
  ]
};

Answer 1

我不太确定DS_STORE文件是什么。但是，在配置加载器时，请为这些文件提供exclude。

你能提供你的webpack配置，特别是loader配置和demo.css吗？我可以为您提供配置。

Answer 2

这里的问题是ManifestRevisionPlugin正在读取目录并拾取.DS_Store文件。为了解决这个问题，我添加了一个排除正则表达式：

new ManifestRevisionPlugin(path.join('build', 'manifest.json'), {
  rootAssetPath: rootAssetPath,
  ignorePaths: ['/c', '/j', /.*\.DS_Store/]
})

使用webpack和ManifestRevisionPlugin排除文件（即.DS_Store）

2 个答案: