reactjs - 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件 - Webpack

Question

我现在想将 webpack 用于生产，跟进我创建 webpack.common.js、webpack.dev.js 和 webpack.prod.js 并安装 webpack-merge 的文档：https ://webpack.js.org/guides/production / 一切都很好，直到我决定部署第一次生产 webpack，我遵循了指南，现在编译不正确。我的 webpack.config.js 中有加载器：'babel-loader'，因为我根本没有更改该文件.

我在使用脚本时收到以下错误：“startWebpackProd”：“webpack serve --open --config ebpack.dev.js”，

./src/app.js 中的错误 9:16 模块解析失败：意外令牌 (9:16) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders | |

ReactDOM.render(

这是样板戏

, document.getElementById("app"));

包.json

{
  "name": "indecision-app",
  "version": "1.0.0",
  "main": "index.js",    
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.12.13",
    "babel-cli": "6.24.1",
    "babel-loader": "8.2.2",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "css-loader": "^5.1.1",
    "live-server": "^1.2.1",
    "node-sass": "^5.0.0",
    "normalize.css": "^8.0.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-modal": "^3.12.1",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "validator": "13.5.2",
    "webpack": "^5.24.4",
    "webpack-dev-server": "3.11.2"
  },
  "scripts": {
    "serve": "live-server public/",
    "buildWebpack": "webpack",
    "startWebpackProd": "webpack serve --open --config webpack.dev.js",
    "buldWebpackProd": "webpack --config webpack.prod.js",
    "dev-server": "webpack serve"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "html-webpack-plugin": "^5.3.1",
    "webpack-cli": "^4.5.0",
    "webpack-merge": "^5.7.3"
  }
}

webpack.config.js

const path = require('path');
console.log(path.join(__dirname, 'public'));

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js' // nazywamy jak chcemy ale ta jest dobra
    },
    
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/,
        },{
            test: /\.s?css$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
        },
    {
        // mode: 'development',
    }]
        
    },
    devtool: 'eval-cheap-module-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
    }
    
};

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
});

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/app.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Production',
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
};

标签： reactjswebpack