我知道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
答案 0 :(得分：0)
可能是我错了，但我想我已经读过关于.babelrc的一些内容，如果您使用此文件，它将覆盖webpack-babel配置。 那么也许你的transform-class-properties插件不再被激活了？！
答案 1 :(得分：0)
您的错误与我的错误类似，但看起来您的问题并非如此...
我的意思是我在某处包含了json-loader，这导致了Webpack 4的问题。
如果您有一个json-loader隐藏在某处，只需为您发布此内容。