3
おはよう！私は生産の上に構築するいくつかの問題があります：要求は定義されていません。それはreact.production.min.jsによって引き起こされました。ここ はすべてがDEVに良いですが、私が使用している場合& & package.jsonプロダクションビルドでrequireが定義されていません（react.production.min.js）
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const debug = process.env.NODE_ENV !== 'production';
let plugins = [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
Promise: 'imports-loader?this=>global!exports-loader?global.Promise!core-js/es6/promise',
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!fetch-polyfill'
}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'BASE_URL':JSON.stringify(process.env.BASE_URL)
}
})
];
if(!debug) {
plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: {
unsafe_comps: true,
properties: true,
keep_fargs: false,
pure_getters: true,
collapse_vars: true,
unsafe: true,
warnings: false,
screw_ie8: true,
sequences: true,
dead_code: true,
drop_debugger: true,
comparisons: true,
conditionals: true,
evaluate: true,
booleans: true,
loops: true,
unused: true,
hoist_funs: true,
if_return: true,
join_vars: true,
cascade: true,
drop_console: true
},
sourceMap: false
}));
}
module.exports = {
cache:debug,
devtool:debug ? "cheap-module-eval-source-map" : "",
context:path.join(__dirname,'/src'),
entry:{
index:'./index.js'
},
output:{
path:path.join(__dirname,'build'),
filename:'js/[name].js',
chunkFilename:'js/bundles/[name].[hash].bundle.js',
publicPath:'/build/'
},
resolve:{
modules:["node_modules"],
extensions:['.js','.jsx','.css','.scss']
},
resolveLoader:{
modules:["node_modules"],
moduleExtensions:['*-loader',"*"]
},
module:{
noParse:[/\.min\.js$|\.production\.min\.js$/],
rules:[{
test:/\.(sass|scss)$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
modules:true,
localIdentName: '[local]'
}
},
'sass-loader?resolve url'
]
},{
test:/\.(js|jsx)$/,
include:[path.join(__dirname,'/src')],
exclude:[path.join(__dirname,'/build')],
use:[{
loader:"babel-loader",
options:{
presets:['es2015','react','babel-polyfill','stage-0'],
plugins:[
// [
// "module-alias",[
// {"src":"./styles","expose":"@app-styles"},
// {"src":"./api","expose":"@app-api"},
// {"src":"./utils","expose":"@app-utils"},
// {"src":"./constants","expose":"@app-constants"},
// {"src":"./decorate","expose":"@app-decorate"},
// {"src":"./stores","expose":"@app-stores"},
// {"src":"./services","expose":"@app-services"},
// {"src":"./components","expose":"@app-components"},
// {"src":"./utils/invariant.js","expose":"@invariant"}
// ]
// ],
'syntax-async-functions',
'syntax-dynamic-import',
'transform-async-to-generator',
'transform-regenerator',
['transform-runtime',{
"helpers": false,
"polyfill": false,
"regenerator": true
}],
'transform-decorators-legacy',
'transform-es3-property-literals'
]
}
}],
},{
test:/\.json$/,
use:[{
loader:'json-loader'
}]
},{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
]
},{
test:/\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
use:['url-loader?limit=100000']
}]
},
plugins:plugins,
stats: { colors: true }
}
package.json
{
"name": "ippf-react",
"version": "1.0.0",
"description": "javascript core",
"main": "webpack.config.js",
"private": true,
"scripts": {
"watch": "SET NODE_ENV=development& webpack --watch --progress",
"server": "node static-server.js",
"prestart": "npm run package",
"package": "SET NODE_ENV=production& webpack -p --progress",
"package_unix": "NODE_ENV=production webpack -p --progress",
"test:single": "karma start karma.conf.js --log-level debug --single-run",
"test:watch": "karma start karma.conf.js --auto-watch --log-level debug",
"stats": "webpack --profile --json > stats.json"
},
"dependencies": {
"classnames": "^2.2.4",
"lodash": "^4.17.4",
"fetch-polyfill": "^0.8.2",
"core-js": "^2.4.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-hot-loader": "^1.3.0",
"react-intl": "^1.2.2",
"react-draggable": "3.0.3",
"mobx-react": "^4.2.2",
"mobx": "^3.3.1",
"prop-types": "^15.6.0",
"react-transition-group": "^2.2.0",
"i18next": "10.0.7",
"react-grid-layout": "0.16.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.2",
"babel-plugin-module-alias": "^1.6.0",
"babel-plugin-module-resolver": "2.7.1",
"babel-plugin-object-assign": "^1.2.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
"babel-plugin-transform-es3-property-literals": "^6.8.0",
"babel-plugin-transform-object-rest-spread": "^6.20.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-es2017": "^6.22.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "6.23.0",
"babelify": "^7.3.0",
"chai": "^4.0.2",
"css-loader": "^0.28.4",
"exports-loader": "^0.6.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"imports-loader": "^0.7.1",
"jasmine-core": "^2.6.3",
"json-loader": "^0.5.7",
"karma": "^1.7.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-edge-launcher": "^0.4.1",
"karma-firefox-launcher": "^1.0.1",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^1.1.0",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.3",
"karma-phantomjs-launcher": "^1.0.4",
"karma-safari-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.3",
"mocha": "^3.4.2",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.5",
"style-loader": "^0.18.2",
"url-loader": "^0.5.8",
"webpack": "^3.8.1",
"webpack-bundle-analyzer": "2.9.1"
},
"author": "_",
"license": "ISC"
}
私webpack.config.jsです"npmパッケージを実行する"、この問題が発生します。助けてください！ありがとう 最高の、Petr
なぜWebpackを使用する場合は 'react.production.min.js'を使用しますか？ –
@ dev-null \t ビルドの時間を最小限に抑えるには、それは問題ではありません。v16.0より前に動作しました。 –