Вам может понадобиться соответствующий загрузчик для обработки этого типа файла ошибка возникает в ReactJS файле - PullRequest
Новая
       1

Вам может понадобиться соответствующий загрузчик для обработки этого типа файла ошибка возникает в ReactJS файле

0 голосов
/ 29 февраля 2020

Я разделил свою конфигурацию на два режима производства и разработки и объединил их с помощью webpack-merge.

enter image description here

Всякий раз, когда я пытаюсь построить или запустите код, который мне дает, вам может потребоваться соответствующая ошибка загрузчика, даже если у меня есть определение загрузчика для файлов jsx или js.

Общий код файла конфигурации находится здесь ... 

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
    entry : "./src/index.js",
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                presets: ['es2015', 'react']
                }
            }
        ]
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
}

Код конфигурации производства: 

const path = require("path");
const common = require("./webpack.config");
const merge = require("webpack-merge");

module.exports = (common, {
    mode : "production",
    output: {
        filename : "bundle.[contentHash].js",
        path : path.resolve(__dirname, "dist")
    }
});

Код конфигурации разработки 

const path = require("path");
const common = require("./webpack.config.js");
const merge = require("webpack-merge");

module.exports = (common, {
    mode : "development",
    output: {
        filename : "bundle.js",
        path : path.resolve(__dirname, "dist")
    }
});

индекс. js код 

import "./assets/scss/main.scss";
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

.babelr c код 

{
    "presets": ["env", "react","@babel/preset-env"],
    "plugins": [
        "transform-class-properties"
    ]
}

Ответы [ 2 ]

1 голос
/ 29 февраля 2020

Вам нужно будет вызвать merge для обоих ваших файлов, объединяя common с объектом, указанным для каждого случая: 

// webpack.prod.js

const path = require("path");
const common = require("./webpack.config");
const merge = require("webpack-merge");

module.exports = merge(common, {
    mode : "production",
    output: {
        filename : "bundle.[contentHash].js",
        path : path.resolve(__dirname, "dist")
    }
});

// webpack.dev.js

const path = require("path");
const common = require("./webpack.config.js");
const merge = require("webpack-merge");

module.exports = merge(common, {
    mode : "development",
    output: {
        filename : "bundle.js",
        path : path.resolve(__dirname, "dist")
    }
});
1 голос
/ 29 февраля 2020

Эта ошибка возникает из-за того, что ваш JSX не компилируется в JavaScript.

Тест в вашем конфигурационном файле, который обрабатывает это: 

test: /.(js|jsx)$/,
loader: 'babel-loader',

Я вижу, что вы импортировано «webpack-merge», но не похоже, что вы используете его (по крайней мере, в коде, который отображается в вашем вопросе). Так что, похоже, вы не объединяете разрозненные файлы конфигурации так, как вы ожидая (или, может быть, вообще).

Вместо того, чтобы разбивать вашу конфигурацию на несколько файлов, обычно [из того, что я видел] разработчики предпочитают использовать один файл с некоторыми логами c, основанными на переменной среды: https://webpack.js.org/guides/environment-variables/ 

process.env.NODE_ENV === 'dev' ? doDevStuff : doProdStuff
...