我在使用webpack捆绑我的应用程序时遇到问题，我在网站上阅读过类似的问题，虽然我尝试了所有的建议，但我无法弄清楚什么是错误。“require is not defined”使用webpack 2

一切都很好。然而，当我打开浏览器告诉我这个错误：
未捕获的ReferenceError：要求没有定义

的WebPack-dist.conf.js

const webpack = require('webpack'); 
const conf = require('./gulp.conf'); 
const path = require('path'); 

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const FailPlugin = require('webpack-fail-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const pkg = require('../package.json'); 
const autoprefixer = require('autoprefixer'); 
const nodeExternals = require('webpack-node-externals'); 

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.json$/, 
     loaders: [ 
      'json-loader' 
     ] 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint-loader', 
     enforce: 'pre' 
     }, 
     { 
     test: /\.(css|scss)$/, 
     loaders: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: 'css-loader?minimize!sass-loader!postcss-loader' 
     }) 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: [ 
      'ng-annotate-loader', 
      'babel-loader' 
     ] 
     }, 
     { 
     test: /\.html$/, 
     loaders: [ 
      'html-loader' 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    FailPlugin, 
    new HtmlWebpackPlugin({ 
     template: conf.path.src('index.html') 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     output: {comments: false}, 
     compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase 
    }), 
    new ExtractTextPlugin('index-[contenthash].css'), 
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}), 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     postcss:() => [autoprefixer] 
     } 
    }) 
    ], 
    target: 'node', 
    externals: [nodeExternals()], 
    output: { 
    path: path.join(process.cwd(), conf.paths.dist), 
    filename: '[name]-[hash].js' 
    }, 
    entry: { 
    app: `./${conf.path.src('index')}`, 
    vendor: Object.keys(pkg.dependencies) 
    } 
};

的package.json

{ 
    "dependencies": { 
    "angular": "^1.6.2", 
    "angular-ui-router": "1.0.0-beta.3", 
    "body-parser": "^1.17.2", 
    "cookie-parser": "^1.4.3", 
    "debug": "^2.6.8", 
    "express": "^4.15.3", 
    "morgan": "^1.8.2", 
    "pug": "^2.0.0-rc.2" 
}, 
"devDependencies": { 
    "@types/angular": "^1.6.6", 
    "@types/angular-mocks": "^1.5.9", 
    "@types/angular-ui-router": "^1.1.36", 
    "@types/jquery": "^2.0.40", 
    "angular-mocks": "^1.6.2", 
    "autoprefixer": "^6.7.3", 
    "babel-core": "^6.23.1", 
    "babel-eslint": "^7.1.1", 
    "babel-loader": "^6.3.2", 
    "babel-plugin-istanbul": "^4.0.0", 
    "babel-polyfill": "^6.23.0", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-es2017": "^6.24.1", 
    "bootstrap": "^4.0.0-alpha.6", 
    "browser-sync": "^2.18.8", 
    "browser-sync-spa": "^1.0.3", 
    "css-loader": "^0.26.4", 
    "del": "^2.2.2", 
    "es6-shim": "^0.35.3", 
    "eslint": "^3.15.0", 
    "eslint-config-angular": "^0.5.0", 
    "eslint-config-xo-space": "^0.15.0", 
    "eslint-loader": "^1.6.1", 
    "eslint-plugin-angular": "^1.6.1", 
    "eslint-plugin-babel": "^4.0.1", 
    "extract-text-webpack-plugin": "^2.0.0-rc.3", 
    "file-loader": "^0.11.1", 
    "font-awesome": "^4.7.0", 
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb", 
    "gulp-angular-filesort": "^1.1.1", 
    "gulp-angular-templatecache": "^2.0.0", 
    "gulp-filter": "^5.0.0", 
    "gulp-htmlmin": "^3.0.0", 
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4", 
    "gulp-insert": "^0.5.0", 
    "gulp-ng-annotate": "^2.0.0", 
    "gulp-sass": "^3.1.0", 
    "gulp-util": "^3.0.8", 
    "html-loader": "^0.4.4", 
    "html-webpack-plugin": "^2.28.0", 
    "jasmine": "^2.5.3", 
    "jquery": "^3.2.1", 
    "json-loader": "^0.5.4", 
    "karma": "^1.4.1", 
    "karma-angular-filesort": "^1.0.2", 
    "karma-coverage": "^1.1.1", 
    "karma-jasmine": "^1.1.0", 
    "karma-junit-reporter": "^1.2.0", 
    "karma-ng-html2js-preprocessor": "^1.0.0", 
    "karma-phantomjs-launcher": "^1.0.2", 
    "karma-phantomjs-shim": "^1.4.0", 
    "karma-webpack": "^2.0.2", 
    "mdbootstrap": "^4.3.2", 
    "ng-annotate-loader": "^0.2.0", 
    "node-sass": "^4.5.0", 
    "phantomjs-prebuilt": "^2.1.14", 
    "postcss-loader": "^1.3.1", 
    "sass-loader": "^6.0.1", 
    "style-loader": "^0.13.1", 
    "tether": "^1.4.0", 
    "url-loader": "^0.5.8", 
    "webpack": "^2.2.1", 
    "webpack-fail-plugin": "^1.0.5", 
    "webpack-node-externals": "^1.6.0" 
}, 
"scripts": { 
"start": "node app.js", 
"build": "gulp", 
"serve": "gulp serve", 
"serve:dist": "gulp serve:dist", 
"test": "gulp test", 
"test:auto": "gulp test:auto" 
}, 
"eslintConfig": { 
"globals": { 
    "expect": true 
}, 
"root": true, 
"env": { 
    "browser": true, 
    "jasmine": true 
}, 
"parser": "babel-eslint", 
"extends": [ 
    "xo-space/esnext" 
    ] 
} 
}

如果有人能帮助，我会很感激。

来源

2017-06-04 Cesar Jr Rodriguez

您使用了不正确的target：

target: 'node'

这意味着捆绑意在使Node.js（服务器端）程序，而不是浏览器中使用。您可以将其更改为web，或者仅删除该行（因为web是默认值）。

来源

2017-06-04 06:25:26 robertklep

问题仍然存在 –

，如果它是有针对性地浏览器，则不应使用'的WebPack节点，externals'。它将依赖关系转换为单个需求调用。删除'target：'节点'后面的下一行 –

一些配置需要改变：

target: 'web', // which is by default // externals: [nodeExternals()], remove this as it is causing problem

来源

2017-10-13 11:10:19

“require is not defined”使用webpack 2

的WebPack-dist.conf.js

的package.json

回答

相关问题