Я начал с конфигурации, состоящей из webpack 3 и аналогичной старой версии babel. Его можно найти в следующем репо:
https://github.com/konradmi/react-loadable-ssr-code-splitting
Я обновил webpack и babel до их последних версий, а также все модули узлов, и соответственно перенес старую конфигурацию. Эта проблема может быть вызвана любым из них.
Как только я закончил миграцию, я заметил, что все плагины babel пересекают мои файлы конфигурации webpack (которые находятся в отдельной вложенной папке) вместо фактических js исходных файлов, которые должным образом обрабатываются webpack. (Я проверил это, выполнив некоторые записи в плагинах babel).
Результат один и тот же, независимо от того, использую ли я .babelrc или нет.
Раньше файлы конфигурации webpack находились в корне проекта, как вы можете видеть в репозитории, на который я ссылался выше, и теперь они находятся во вложенной папке "config".
Сначала я подумал, что это может быть причиной этой проблемы, поэтому я попробовал следующее:
Использование path.resolve () в точке входа, чтобы использовать абсолютный путь, чтобы убедиться, что он не будет повторно интерпретирован babel из строки относительно того, кто знает, где.
Помещение файлов конфигурации webpack обратно в корень проекта и сборка с этого пути.
Во всех вариациях, которые я пробовал - webpack всегда отлично работает, в то время как babel просматривает не те файлы. Я даже не уверен, как это возможно, babel-loader должен обходить файлы, которые он получил из предыдущего правила веб-пакета, которое выдало правильные файлы.
Вот мои текущие файлы конфигурации Webpack 4, объединенные в 1 файл и лишенные ненужных правил и плагинов для вашего удобства:
const webpack = require('webpack')
const path = require('path')
const webpackNodeExternals = require('webpack-node-externals')
module.exports = {
name: 'server',
target: 'node',
externals: [webpackNodeExternals()],
entry: './src/server.tsx',
output: {
filename: 'bundle.js',
chunkFilename: '[name].js',
path: path.resolve(__dirname, '../build')
},
mode: 'development',
stats: 'verbose',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: [
[
'@babel/env',
{
'targets': {
'browsers': ['last 2 versions']
},
'debug': false
}
],
'@babel/preset-react'
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-object-assign',
'react-loadable/babel'
]
}
}
]
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
}
]
}
}