Question

这是我的软件包文件和webpack配置。我正在学习这项技术，但是无法正常工作。我收到一个空白画布项目的以下错误。我在做错什么吗？

非常感谢，

错误消息

ERROR in ./src/index.js 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
| import App from './App';
| 
> ReactDOM.render(<App />, document.getElementById('root'));

package.json

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

webpack.config.js

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <h1>hello</h1>
            </div>
        )
    }
}

我现在有以下webpack.config.js

更新-完整文件

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()]
};

此更改之后，在运行npm install之后，运行npm start时出现以下错误

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPrese
nce?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, w
rappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.resolve.extensions[0] should be an non-empty string.
   -> A non-empty string
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! boilerplate@1.0.0 start: `webpack --mode development --watch`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the boilerplate@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

更新2

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()]
};

此文件版本收到错误

[./src/index.js] 3.16 KiB {main} [not cacheable] [built] [failed] [1 error]

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)

Answer 1

将此添加到您的Webpack中 ...您在webpack中的代码...

,resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  }

在文件夹中尝试npm install，然后再次使用npm start

Answer 2

首先，您的财产

module:{ loaders

不正确，应该是 modules-> rules 。其次，您的文件夹中没有任何JSX，您有App.js，因此您的规则应对其进行测试并为其加载适当的加载器，这将使我们成为babel-loader并设置了可响应的预设

 module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }

要告诉babel使用react作为其预设，可以在上面的配置中指定，也可以创建一个 .babelrc 文件，其中包含以下内容。

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }

在此之后，您应该会很好

Webpack不适用于使用npm start的简单项目

2 个答案: