“besoin n'est pas définie” à l'Aide de webpack 2
Je vais avoir des problèmes avec le bundle de mon application en utilisant webpack, j'ai de la lecture dans le site à des problèmes similaires si j'ai essayé toutes les recommandations et je ne peux pas la comprendre quel est le problème.
Tout bundles bien. Cependant quand j'ouvre le navigateur me montrer cette erreur:
Uncaught ReferenceError: besoin n'est pas défini
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)
}
};
paquet.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"
]
}
}
Je serai reconnaissant si quelqu'un peut aider.
OriginalL'auteur Cesar Jr Rodriguez | 2017-06-04
Vous devez vous connecter pour publier un commentaire.
Appuyez sur ce problème lors de la construction d'un backend l'aide d'un noeud + express et hébergé widget pour une utilisation sur le côté client. Mon webpack config est divisé en deux, un pour le backend, un pour le frontend.
OriginalL'auteur David
Vous utilisez une mauvaise cible:
Cela signifie que le module est destiné à être utilisé dans un Node.js (côté serveur), pas un navigateur. Vous pouvez le modifier à
web
, ou tout simplement supprimer cette ligne (parce queweb
est la valeur par défaut).Vous ne devez pas utiliser
webpack-node-externals
si elle est destinée au navigateur. Il est la conversion de dépendances à un seul besoin des appels. Supprimer la ligne suivante aprèstarget : 'node
target
doit être réglé àweb
etexternals
doit être laissé vide, sauf si vous utilisez des bibliothèques qui ne sont pas groupées, comme par exemple jQuery à partir de CA etc.que faire si vous êtes en utilisant des bibliothèques qui sont groupés?
OriginalL'auteur robertklep
Certains de la configuration doivent être changées:
target: 'web', //which is by default
//externals: [nodeExternals()], remove this as it is causing problem
Webpack comprendra le module de code dans votre bundle. Donc, juste
require('some-lib')
comme d'habitude et vous allez voir le code source poursome-lib
retirée de node_modules et ajouté à votre bundle.js.OriginalL'auteur Akansha Srivastava