Переместить файлы JSON из основного пакета webpack в собственные файлы
Я создаю небольшое веб-приложение, в которое я загружаю данные из нескольких файлов JSON.
import config from './config.json';
import data from './data.json';
console.info(config, data)
Для моей сборки веб-пакета я хочу исключить файлы JSON из пакета, поскольку они довольно большие (и могут загружаться асинхронно). В настоящее время я пытаюсь использовать file-loader для достижения этой цели.
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: '#cheap-source-map',
resolve: {
modules: ['node_modules']
},
entry: {
main: path.resolve('./index.js')
},
output: {
filename: '[name].bundle.js',
path: path.resolve('./dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
type: 'javascript/auto',
test: /\.json$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
inject: 'body'
})
]
};
С этой конфигурацией я получаю отдельные файлы, но они не будут импортированы. В данном конкретном случае console.info() возвращает имя файла только в виде строк data.json и config.json. Похоже, что настоящие файлы JSON не загружены.
Что я делаю неправильно? file-loader способ пойти сюда?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Использование file-loader не поможет. Решение состоит в том, чтобы использовать SplitChunksПлагин, который включен в веб-пакет, начиная с версии 4. Для более старых версий используйте CommonsChunkПлагин.
Вот рабочий webpack.config.json файл:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: '#cheap-source-map',
resolve: {
modules: ['node_modules']
},
entry: {
main: path.resolve('./index.js')
},
output: {
filename: '[name].bundle.js',
path: path.resolve('./dist')
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 0,
cacheGroups: {
data: {
test: /\.json$/,
filename: '[name].js',
name(module) {
const filename = module.rawRequest.replace(/^.*[\/]/, '');
return filename.substring(0, filename.lastIndexOf('.'));
},
}
}
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
inject: 'body'
})
]
};
Файлы загружаются в приложение (см. запросы в DevTools), и console.info(config, data) выводит массив/объект.
Однако это решение будет выводить файлы JSON как JavaScript. Это отлично работает для меня, но может быть проблемой, если вы полагаетесь на файлы в формате JSON. Пример простого config.json:
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[function(n){n.exports = {name:"test"}}]]);
Если вас беспокоят исходные карты, вы можете указать правило exclude с помощью SourceMapDevToolPlugin.