无法使用Webpack 4启动React应用程序

时间:2018-02-25 08:52:10

标签: reactjs webpack

我知道Webpack 4的最终版本仅在今天发布,但尝试新内容的意愿高于即将推出的教程的预期。 我 package.json

{
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
  },  
  "dependencies": {
    "acorn-dynamic-import": "^3.0.0",
    "animated": "^0.2.2",
    "babel-polyfill": "^6.26.0",
    "email-obfuscate": "0.0.6",
    "exports-loader": "^0.7.0",
    "i18next": "^10.3.0",
    "i18next-browser-languagedetector": "^2.1.0",
    "inline-style-prefixer": "^4.0.0",
    "jquery": "^3.3.1",
    "jquery.nicescroll": "github:inuyaksa/jquery.nicescroll",
    "lodash": "^4.17.4",
    "outdated-browser": "^1.0.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-fittext": "^1.0.0",
    "react-helmet": "^5.2.0",
    "react-i18next": "^7.3.6",
    "react-lite": "^0.15.33",
    "react-load-image": "^0.1.6",
    "react-motion": "^0.5.2",
    "react-obfuscate": "^1.3.0",
    "react-parallax-component": "^1.0.33",
    "react-perfect-scrollbar": "^1.0.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-modal": "^1.3.2",
    "react-simple-parallax": "^0.2.6",
    "react-springy-parallax": "^1.0.7",
    "style-loader": "^0.20.2",
    "styled-components": "^3.1.6"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-dynamic-import": "^1.0.0",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.22.0",
    "babel-preset-stage-1": "^6.24.1",
    "babel-register": "^6.24.0",
    "babel-types": "^6.23.0",
    "compression-webpack-plugin": "^1.1.8",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.9",
    "ga-lite": "^2.0.1",
    "html-critical-webpack-plugin": "^1.1.0",
    "html-webpack-plugin": "^2.30.1",
    "image-webpack-loader": "^4.1.0",
    "img-loader": "^2.0.0",
    "mozjpeg": "^5.0.0",
    "node-sass": "^4.7.2",
    "pngquant": "^1.2.0",
    "preload-webpack-plugin": "^2.2.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "sass-loader": "^6.0.6",
    "script-ext-html-webpack-plugin": "^1.8.8",
    "style-ext-html-webpack-plugin": "^3.4.7",
    "webpack": "^4.0.0",
    "webpack-bundle-analyzer": "^2.3.1",
    "webpack-cli": "^2.0.8",
    "webpack-dev-server": "^2.4.2"
  }
}

.babelrc

{
    "presets": [
        "env",
        "react"
    ]
}
用于加载器配置的

webpack.config.js

const path = require('path');
module.exports = {
    module: {

        rules: [{
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        plugins: [
                            ['react-hot-loader/babel', ['transform-object-rest-spread', {
                                useBuiltIns: true
                            }]],
                            [
                                ['transform-object-rest-spread', {
                                    useBuiltIns: true
                                }],
                                ['transform-runtime', {
                                    helpers: false,
                                    polyfill: false,
                                    regenerator: true
                                }]
                            ],
                            'syntax-dynamic-import',
                            'transform-class-properties', ['transform-es2015-classes', {
                                loose: true
                            }]
                        ]
                    }
                }
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(scss)$/,

                use: [{
                        loader: 'css-loader',
                    },
                    'sass-loader'
                ]

            },

            {
                test: /\.(gif|png|jpe?g|svg)$/,
                use: ['file-loader?hash=sha512&digest=hex&name=build/images/[hash].[ext]', 'image-webpack-loader']
            }
        ]
    },
    resolve: {
        modules: [path.resolve('./'), 'node_modules'],
        extensions: ['.js', '.jsx', '.css', 'scss']
    }
};

正在运行npm run dev会给我这些错误和警告:

WARNING in ./node_modules/file-loader/dist/cjs.js?name=./build/assets/favicons/[name].[ext]!./src/assets/favicons/package.json
Module parse failed: Unexpected token m in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token m in JSON at position 0
    at JSON.parse (<anonymous>)
    at JsonParser.parse (D:\marstena webpack 4\node_modules\webpack\lib\JsonParser.js:15:21)
    at doBuild.err (D:\marstena webpack 4\node_modules\webpack\lib\NormalModule.js:367:32)
    at runLoaders (D:\marstena webpack 4\node_modules\webpack\lib\NormalModule.js:264:12)
    at D:\marstena webpack 4\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (D:\marstena webpack 4\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at iterateNormalLoaders (D:\marstena webpack 4\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at D:\marstena webpack 4\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at runSyncOrAsync (D:\marstena webpack 4\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\marstena webpack 4\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
    at D:\marstena webpack 4\node_modules\loader-runner\lib\LoaderRunner.js:202:4
    at process.nextTick (D:\marstena webpack 4\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:73:15)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./src sync !./node_modules/file-loader/dist/cjs.js?name=./build/assets/favicons/[name].[ext] \.(svg|png|ico|xml|json)$
 @ ./src/favicons.js
 @ ./src/index.js

ERROR in ./src/components/App.js
Module build failed: SyntaxError: D:/marstena webpack 4/src/components/App.js: Unexpected token (530:20)

  528 |     }
  529 |
> 530 |     stopPropagation = e => e.stopPropagation();
      |                     ^
  531 |
  532 |     render() {
  533 |

 @ ./src/index.js 13:11-38

ERROR in chunk main [entry]
[name].js
Cannot read property 'replace' of undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! awv3-homepage@1.0.0 dev: `webpack --mode development --module-bind js=babel-loader`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the awv3-homepage@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我已经使用类似的加载程序配置Webpack 3而没有任何问题,但在此我将问题迁移到4

2 个答案:

答案 0 :(得分:0)

可能是我错了,但我想我已经读过关于.babelrc的一些内容,如果您使用此文件,它将覆盖webpack-babel配置。 那么也许你的transform-class-properties插件不再被激活了?!

答案 1 :(得分:0)

您的错误与我的错误类似,但看起来您的问题并非如此...

我的意思是我在某处包含了json-loader,这导致了Webpack 4的问题。

如果您有一个json-loader隐藏在某处,只需为您发布此内容。

https://github.com/webpack-contrib/json-loader/issues/65