"erforderlich ist nicht definiert" Mit webpack 2
Ich habe Probleme mit bundle-meine app mit webpack, ich habe das Lesen in der Seite ähnliche Probleme, aber ich habe versucht alle Empfehlungen und ich kann nicht herausfinden, was falsch ist.
Alles bündelt. Allerdings, wenn ich öffnen Sie die browser zeigen mir diese Fehlermeldung:
Uncaught ReferenceError: require ist nicht definiert
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)
}
};
Paket.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"
]
}
}
Ich werde dankbar, wenn jemand helfen kann.
InformationsquelleAutor Cesar Jr Rodriguez | 2017-06-04
Du musst angemeldet sein, um einen Kommentar abzugeben.
Treffer dieses Problem beim erstellen eines Backends mit node + express-und hosted-widget für den Einsatz auf der client-Seite. Mein webpack config ist unterteilt in zwei, eine für backend, frontend.
InformationsquelleAutor David
Du bist mit einer falschen Ziel:
Dies bedeutet, dass das bundle verwendet werden soll, in einem Node.js (server-Seite) - Programm, kein browser. Sie können es ändern, um
web
, oder entfernen Sie einfach die Zeile (daweb
ist die Standardeinstellung).Sie sollten nicht
webpack-node-externals
wenn es gezielt auf browser -. Es ist die Umwandlung von Abhängigkeiten zu einem einzigen verlangen ruft. Entfernen Sie die nächste Zeile nachtarget : 'node
target
sollteweb
undexternals
sollte leer gelassen werden, es sei denn, Sie sind mit Bibliotheken, die nicht als bundles, wie z.B. jQuery vom CDN etc.was ist, wenn Sie die Verwendung von Bibliotheken, die gebündelt?
InformationsquelleAutor robertklep
Einige der Konfiguration geändert werden müssen:
target: 'web', //which is by default
//externals: [nodeExternals()], remove this as it is causing problem
Webpack umfasst den Modul-code in Ihrem Bündel. Also einfach
require('some-lib')
wie üblich, und du wirst sehen, dass der source-code fürsome-lib
herausgezogen node_modules und Hinzugefügt, um Ihre bundle.js.InformationsquelleAutor Akansha Srivastava