Javascript &引用；“要求”未定义；使用网页2

我在使用webpack捆绑我的应用程序时遇到了问题，我在网站上读到了类似的问题，尽管我尝试了所有的建议，但我不知道出了什么问题

一切都很好。但是，当我打开浏览器时，会显示此错误：
未捕获引用错误：未定义require

webpack-dist.conf.js package.json 如果有人能帮忙，我将不胜感激。

您使用的是错误的：

---

这意味着捆绑包将用于Node.js（服务器端）程序，而不是浏览器。您可以将其更改为

web

，或者只删除该行（因为

web

是默认设置）。

某些配置需要更改：

target:'web'，//默认为
//externals:[nodeExternals（）]，删除此项，因为它会导致问题

在使用node+express和托管小部件构建后端以在客户端使用时遇到此问题。我的网页包配置分为两个，一个用于后端，一个用于前端

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');

const config = {
  // set to false because __dirname resolving to / instead of absolute path when
  // built using webpack
  node: {
    __dirname: false
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  },
  // set to development to read .env.local variables
  mode: 'development'
};

const serverConfig = Object.assign({}, config, {
  // set target to node to fix build warnings
  target: 'node',
  name: 'server',
  entry: __dirname + '/src/index.js',
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'index.js'
  },
  // webpack-node-externals package used to exclude other packages like express
  // in the final bundle.js
  externals: [nodeExternals()]
});

// widget.js file served from dist/widget
const widgetConfig = Object.assign({}, config, {
  // set target to web for use in browsers
  target: 'web',
  name: 'widget',
  entry: __dirname + '/widget/index.js',
  output: {
    path: path.resolve(__dirname + '/dist/widget/js'),
    filename: 'widget.js'
  }
});

module.exports = [widgetConfig, serverConfig];

---

问题仍然存在，如果是针对浏览器，则不应使用

webpack节点外部。它正在将依赖项转换为单个require调用。删除
target之后的下一行：'node
target
应设置为
web
，
externals
应保留为空，除非您使用的库不是捆绑包，例如来自CDN的jQuery等。@Stijndewit如果您使用的库是捆绑包呢？修复了我的问题！非常感谢。如果您删除了这个，那么您将如何添加您需要的模块？Webpack将在您的包中包含模块代码。所以只要像往常一样
require（'some-lib'）
，你就会看到
some-lib
的源代码从节点_模块中取出并添加到bundle.js中。你救了我一天！最后创建了一个功能完整的服务器端和客户端呈现的网页。
{
  "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"
  ]
}
}

target: 'node'

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');

const config = {
  // set to false because __dirname resolving to / instead of absolute path when
  // built using webpack
  node: {
    __dirname: false
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  },
  // set to development to read .env.local variables
  mode: 'development'
};

const serverConfig = Object.assign({}, config, {
  // set target to node to fix build warnings
  target: 'node',
  name: 'server',
  entry: __dirname + '/src/index.js',
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'index.js'
  },
  // webpack-node-externals package used to exclude other packages like express
  // in the final bundle.js
  externals: [nodeExternals()]
});

// widget.js file served from dist/widget
const widgetConfig = Object.assign({}, config, {
  // set target to web for use in browsers
  target: 'web',
  name: 'widget',
  entry: __dirname + '/widget/index.js',
  output: {
    path: path.resolve(__dirname + '/dist/widget/js'),
    filename: 'widget.js'
  }
});

module.exports = [widgetConfig, serverConfig];