未捕获的ReferenceError:require未定义Webpack+AngularJS

Question

像这样的问题有几十个，但都没有帮助，因为根本原因总是我没有做的事情。我正在用webpack 4.26.1为浏览器制作一个捆绑包，无论我做什么，当我在浏览器中打开网络应用程序时，我都会得到Uncaught ReferenceError: require is not defined。

我没有使用target: 'node'。

我不需要webpack-node-externals。

我并没有明确地从捆绑包中排除任何内容。

我没有使用noParse。

我甚至尝试过显式设置target: 'web'，尽管它是默认值，只是为了看看是否有什么变化。

这是我的webpack.config.json:的全部内容

const path = require('path');
module.exports = {
mode: 'production',
entry: './src/main/webapp/resources/app/template.core.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'src/main/webapp/resources/dist')
}
};

这是我的包.json

{
(...)
"main": "src/main/webapp/template.core.js",
"dependencies": {
"angular": "^1.6.10",
"angular-animate": "^1.6.10",
"angular-route": "^1.6.10",
"angular-sanitize": "^1.6.10",
"angular-upload": "^1.0.13",
"ui-select": "^0.19.8",
"angular-ui-bootstrap": "^2.5.0",
"moment": "2.22.2"
},
"devDependencies": {
"npm": "^5.6.0",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"jshint": "^2.9.6"
},
"scripts": {
"lint": "jshint src/main/webapp --exclude src/main/webapp/resources/static,src/main/webapp/resources/dist",
"build": "webpack"
},
(...)
}

我做错了什么？

Answer 1

为了将来的参考，我的问题就像在html中包含错误的<script>一样基本，因为由于我的webpack配置，捆绑包的文件名在开发和生产模式中不同。我现在使用html-webpack-plugin生成includes，我的模板文件是一个只有注释的空文件，所以它只输出脚本标记本身。以下是它在我的webpack.config.js:中的样子

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
template: 'path/to/empty/template',
filename: 'path/to/templated/output'
})
],
...
};