使用Webpack 4以Javascript導入JSON文件

Question

我有一個名為generic-map.json的文件，其中包含以下內容：

 [ { "names": ["text", "description"], "map": { "name": "textContent", "target": "property", "type": "string" } }, { "names": ["checked"], "map": { "name": "checked", "target": "property", "type": "boolean" } }, { "names": ["disabled", "readonly"], "map": { "name": "disabled", "target": "property", "type": "boolean" } }, { "names": ["title", "tooltip"], "map": { "name": "title", "target": "property", "type": "string" } }, { "names": ["cssclass", "classname"], "map": { "name": "", "target": "classList", "type": "string" } }, { "names": ["tabindex"], "map": { "name": "tabIndex", "target": "attribute", "type": "string" } } ] 

在Javascript文件中，我嘗試導入此文件：

import generic from './generic-map.json';

Webpack給我以下錯誤 ：

./src/utils/property-mapping/generic-map.json
Module parse failed: Unexpected token ; in JSON at position 733 while parsing near '...type": "string" } }];'
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token ; in JSON at position 733 while parsing near '...type": "string" } }];'
    at JSON.parse (<anonymous>)

我知道從Webpack版本2.0.0開始，webpack不再需要json-loader 。 我正在使用Webpack 4.20.2 。

這是我的加載程序配置：

[{
    test: /(\.js)/,
    exclude: /(node_modules)/,
    loaders: ['babel-loader'],
}, {
    test: /(\.jpg|\.png)$/,
    loader: 'url-loader?limit=10000',
}]

Answer 1

替換test: /(\\.js)/以test: /\\.js$/或test: /\\.jsx?$/

babel-loader由於測試表達式錯誤而處理.json文件。