0
我在使用React 16運行webpack 3.6.0中構建的應用程序時遇到的問題類似於this SO post。 Webpack構建運行正常，但在任何瀏覽器上運行應用程序時，即使指定了noParse選項，我也會得到Uncaught ReferenceError: require is not defined腳本錯誤。這隻發生在生產文件中。開發模式在瀏覽器中運行該應用程序就好了。所以，我不確定我缺少什麼。如何使用webpack轉換生產文件？
如果有人能指出我的錯誤，我會非常感激。以下是我的WebPack配置代碼，.babelrc和腳本的package.json代碼：
webpack.config.base.js
'use strict';
const path = require('path');
const webpack = require('webpack');
let NODE_ENV = process.env.NODE_ENV;
let env = {
production : NODE_ENV === 'production',
staging : NODE_ENV === 'staging',
test : NODE_ENV === 'test',
development : NODE_ENV === 'development' || typeof NODE_ENV === 'undefined'
};
Object.assign(
env, {
build : (env.production || env.staging)
}
);
let config = {
context : __dirname,
entry : {
'vendor' : [
'babel-polyfill',
'html5shiv',
'react',
'react-dom',
'bootstrap',
'redux',
'react-redux',
'redux-saga',
],
'app' : './src/app/App.js',
},
output : {
path : __dirname + '/dev',
filename : '[name]/index.js',
//chunkFilename : 'partials/[name].js' + (env.development ? '?ver=[chunkhash]' : ''),
chunkFilename : 'partials/[name].js',
},
externals : {
jquery : 'jQuery',
},
resolve : {
extensions : ['.webpack.js', '.web.js', '.js', '.jsx'],
moduleExtensions : [
'node_modules',
path.resolve(__dirname, './node_modules'),
],
},
devtool : 'eval-source-map',
module : {
rules : [
{
test : /(\.js|\.jsx)$/,
exclude : /(node_modules)/,
loader : 'babel-loader',
/*query : { presets : ['env', 'stage-1', 'react'] }*/
},
{
test : /\.json$/,
loader : 'json-loader'
},
{
test : /\.css$/,
loader : "style-loader!css-loader"
},
{
test : /(\.scss|\.sass)$/,
use : [
{
loader : 'style-loader', // inject CSS to page
},
{
loader : 'css-loader', // translates CSS into CommonJS modules
},
{
loader : 'postcss-loader', // Run post css actions
options : {
plugins : function() { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
},
{
loader : 'sass-loader' // compiles SASS to CSS
}
]
},
],
noParse : /\.min\.js/
},
plugins : [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin(
{
React : 'react',
ReactDOM : 'react-dom',
$ : 'jquery',
jQuery : 'jquery',
'window.jQuery' : 'jquery',
Popper : ['popper.js', 'default'],
Tether : 'tether',
}
),
new webpack.optimize.CommonsChunkPlugin(
{
names : 'vendor',
//filename : '[name].[chunkhash].js',
minChunks : function (module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
},
children : true,
async : true,
}
),
new webpack.optimize.CommonsChunkPlugin(
{
names : 'manifest',
minChunks : Infinity
}
),
new webpack.DefinePlugin(
{
__DEV__ : env.development,
__STAGING__ : env.staging,
__PRODUCTION__ : env.production,
__CURRENT_ENV__ : '\'' + (NODE_ENV) + '\''
}
)
]
};
module.exports = config;
webpack.config.production.js
'use strict';
const webpack = require('webpack');
const config = require('./webpack.config.base.js');
const CleanWebpackPlugin = require('clean-webpack-plugin');
config.output = {
path : __dirname + '/dist',
filename : '[name]/index.js',
chunkFilename : 'partials/[id].[chunkhash:8].js',
};
config.devtool = 'cheap-module-source-map';
config.plugins = config.plugins.concat(
[
/*new webpack.optimize.UglifyJsPlugin(
{
output : {
comments : false
},
compress : {
warnings : false,
screw_ie8 : true
}
}
),*/
new webpack.DefinePlugin(
{
'process.env' : {
NODE_ENV : JSON.stringify('production')
}
}
),
new CleanWebpackPlugin(['dist'], {
root : __dirname,
verbose : true,
dry : false,
exclude : [],
watch : true,
}),
]
);
module.exports = config;
.babelrc
{
"presets": [
"react",
"stage-1",
[
"env",
{
"targets": {
"browsers": [
"last 2 versions"
]
},
"debug": true,
"modules": "commonjs"
}
]
],
"plugins": [
"transform-class-properties"
]
}
的package.json腳本