Webpack 问题 - 您可能需要一个合适的加载器来处理此文件类型，目前没有配置加载器来处理此文件

Question

以下是我的 webpack 配置文件，

var path = require('path');
const webpack = require('webpack');
const publicPath = '/dist/build/';
const HtmlWebpackPlugin = require('html-webpack-plugin');

const jsIncludes = [
  path.resolve(__dirname, 'src/')
];

module.exports = {
  //Content 
  entry: './index.js',
  // A SourceMap without column-mappings ignoring loaded Source Maps. 
  devtool: 'cheap-module-source-map',
  plugins: [
    //simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.
    new HtmlWebpackPlugin({
      title: 'Inovmac'
    }),
    //Auto replacement of page when i save some file, even css
    new webpack.HotModuleReplacementPlugin()
  ],

  output: {
    path: path.join(__dirname, publicPath),
    filename: '[name].bundle.js',
    publicPath: publicPath,
    sourceMapFilename: '[name].map',
  },

  devServer: {
    port: 3000,
    host: 'localhost',
    //Be possible go back pressing the "back" button at chrome
    historyApiFallback: true,
    noInfo: false,
    stats: 'minimal',
    publicPath: publicPath,
    contentBase: path.join(__dirname, publicPath),
    //hotmodulereplacementeplugin
    hot: true
  },
  module: {
    rules: [
     { 
       test: /\.css$/, use: ['style-loader', 'css-loader'], 
       include: /flexboxgrid/
       //Follow instructions at https://github.com/roylee0704/react-flexbox-grid
     },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(js|jsx)$/,
        include: jsIncludes,
        exclude: /(node_modules)/,
        loaders: ["babel-loader"]
      }]
  },
}

这是我的 package.json：

{
  "name": "services-inovmac",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open",
    "build:dev": "webpack --env=dev --progress --profile --colors",
    "build:dist": "webpack --env=prod --progress --profile --colors"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "redux-devtools": "^3.5.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "loadsh": "0.0.4",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-flexbox-grid": "^2.1.2",
    "react-hot-loader": "^4.5.3",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "styled-components": "^5.0.1"
  }
}

我在运行 build npm run build时看到以下错误

services-inovmac@1.0.0 build /Users/venkatesheppili/Workspace/services-inovmac webpack

哈希：1f1ff22346a26e30edf8 版本：webpack 4.42.0 时间：252ms 构建时间：03/10/2020 7:21:23 PM 2 assets 入口点 main = main.bundle.js main.map [0] ./index.js 314 bytes { 0} [内置] [失败] [1 个错误]

ERROR in ./index.js 7:2
Module parse failed: Unexpected token (7:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| ReactDOM.render(
>   <Container />,
|   document.getElementById('root')
| );
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! services-inovmac@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the services-inovmac@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/venkatesheppili/.npm/_logs/2020-03-11T00_21_23_276Z-debug.log

Answer 1

使用以下 webpack 配置解决了我的项目，

var path = require('path');
const webpack = require('webpack');
const publicPath = '/dist/build/';
const HtmlWebPackPlugin = require("html-webpack-plugin");


module.exports = {
  entry: './index.jsx',
  devtool: 'cheap-module-source-map',
  plugins: [
    new HtmlWebPackPlugin({
      template: "./index.html",
      filename: "./index.html"
    })
  ],

  output: {
    path: path.join(__dirname, publicPath),
    filename: '[name].bundle.js',
    publicPath: publicPath,
    sourceMapFilename: '[name].map',
  },

  devServer: {
    port: 3000,
    host: 'localhost',
    historyApiFallback: true,
    noInfo: false,
    stats: 'minimal',
    publicPath: publicPath,
    contentBase: path.join(__dirname, publicPath),
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.css$/, use: ['style-loader', 'css-loader'],
        include: /flexboxgrid/
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
}

这是我的项目结构，项目结构