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

Question

When I run build or watch in my webpack app, it throws an exception when it tries to parse the macOS .DS_Store metadata files. How do I configure it to ignore those files?

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)

and here's my full webpack config:

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

I'm not quite sure what DS_STORE files are. But when you configure your loaders, provide an exclude for these files.

Could you provide your webpack config, specifically the loader config, and demo.css? I can provide you the configuration.

Answer 2

The issue here was that ManifestRevisionPlugin was reading the directory, and picking up .DS_Store files. To fix it, I added an exclude regex:

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