webpackを使用したビルドプロセスを含むReactのチュートリアルに従っています。具体的には、私は2つのファイル（メインとベンダー）を作成しようとしています。私は、スクリプト（SET NODE_ENV =生産& & WebPACKの--config webpack.config.babel.js）を構築し実行すると、次のエラーでクラッシュ：webpackでエラーを作成する
<--- Last few GCs ---> 45011 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure]. 45063 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure]. 45115 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure]. 45167 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure]. 45219 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure].
<--- JS stacktrace ---> ==== JS stack trace ========================================= Security context: 000002E09573FA99 2: takeMatchingModules [C:\Users\Cristi\Desktop\react_scafold\hello-world\node_modules\webpack-split-chunks\lib\Tools.js:~17] [pc=00000189 723E4510] (this=00000342038AF381 ,chunkList=00000342038502E9 ,testers=000001653754EB29 ) 3: /* anonymous */ [C:\Users\Cristi\Desktop\react_scafold\hello-world\node_modules\webpack-split-ch... FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of memory
npm ERR! Windows_NT 6.3.9600 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build" npm ERR! node v6.11.1 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! [email protected] build:
SET NODE_ENV=production && webpack --config webpack.config.babel.jsnpm ERR! Exit status 3 npm ERR! npm ERR! Failed at the [email protected] build script 'SET NODE_ENV=production && webpack --config webpack.config.babel.js'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the hello-world package,npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! SET NODE_ENV=production && webpack --config webpack.config.babel.js npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs hello-world npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls hello-world npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! C:\Users\Cristi\Desktop\react_scafold\hello-world\npm-debug.log
NPM-DEBUG.LOGファイル：を
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\Cristi\Desktop\react_scafold\hello-world\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x64;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\nodejs\;C:\Users\Cristi\AppData\Local\atom\bin;C:\Users\Cristi\AppData\Roaming\npm
10 verbose lifecycle [email protected]~build: CWD: C:\Users\Cristi\Desktop\react_scafold\hello-world
11 silly lifecycle [email protected]~build: Args: [ '/d /s /c',
11 silly lifecycle 'SET NODE_ENV=production && webpack --config webpack.config.babel.js' ]
12 silly lifecycle [email protected]~build: Returned: code: 3 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build:
SET NODE_ENV=production && webpack --config webpack.config.babel.js14 verbose stack Exit status 3
14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:891:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Users\Cristi\Desktop\react_scafold\hello-world
17 error Windows_NT 6.3.9600
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
19 error node v6.11.1
20 error npm v3.10.10
21 error code ELIFECYCLE
22 error [email protected] build:
SET NODE_ENV=production && webpack --config webpack.config.babel.js22 error Exit status 3
23 error Failed at the [email protected] build script 'SET NODE_ENV=production && webpack --config webpack.config.babel.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the hello-world package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error SET NODE_ENV=production && webpack --config webpack.config.babel.js
23 error You can get information on how to open an issue for this project with:
23 error npm bugs hello-world
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls hello-world
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
package.json：
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-cli": "^6.26.0",
"babel-polyfill": "^6.23.0",
"express": "^4.15.3",
"path": "^0.12.7",
"prop-types": "^15.5.8",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.1",
"react-scripts": "1.0.10",
"serve": "^6.0.3"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"css-loader": "^0.28.7",
"file-loader": "^0.11.2",
"open": "^0.0.5",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.5",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.0",
"webpack-split-chunks": "^0.2.1"
},
"scripts": {
"start": "babel-node --max-old-space-size=1024 src/server",
"production": "SET NODE_ENV=production BABEL_ENV=production && npm run
build && npm start",
"build": "SET NODE_ENV=production && webpack --config
webpack.config.babel.js"
}
}
webpack.config.babel.js
// Dependencies
import webpack from 'webpack';
import path from 'path';
import ChunksPlugin from 'webpack-split-chunks';
// Environment
const isDevelopment = process.env.NODE_ENV !== 'production';
// Paths
const PATHS = {
index: path.join(__dirname, 'src/index'),
build: path.join(__dirname, 'src/public'),
src: path.join(__dirname, 'src')
};
const getDevtool =() => 'cheap-module-eval-source-map';
const getEntry =() => {
const entry = [PATHS.index];
if (isDevelopment) {
entry.push('webpack-hot-middleware/client?reload=true');
}
return entry;
};
const getOutput =() => ({
path: PATHS.build,
publicPath: '/',
filename: '[name].bundle.js'
});
const getPlugins =() => {
const plugins = [
new ChunksPlugin({
to: 'vendor',
test: /node_modules/
})
];
if (isDevelopment) {
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
);
} else {
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
//screw_ie8: true,
warnings: false
}
})
);
}
return plugins;
};
const getLoaders =() => ({
loaders: [
{
test: /\.js?$/,
include: PATHS.src,
loader: 'babel-loader'
},
{
test: /(\.css)$/,
loader: ['style-loader', 'css-loader']
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
} );
export default {
devtool: getDevtool(),
entry: getEntry(),
output: getOutput(),
plugins: getPlugins(),
module: getLoaders()
};