未捕获的ReferenceError:require未定义Webpack + AngularJS
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了未捕获的ReferenceError:require未定义Webpack + AngularJS相关的知识,希望对你有一定的参考价值。
像这样的问题有几十个问题,没有一个问题有帮助,因为根本原因总是我不做的事情。我正在使用webpack 4.26.1为浏览器创建一个捆绑包,当我在浏览器中打开webapp时,无论我做什么,我都会继续获取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')
}
};
这是我的package.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"
},
(...)
}
我究竟做错了什么?
为了将来参考,我的问题是基本的,因为在html中包含了错误的<script>
,因为由于我的webpack配置,bundle的文件名对于开发和生产模式是不同的。我现在使用html-webpack-plugin
生成包含,我的模板文件是一个只有注释的空文件,因此它只输出脚本标签本身。这是它在我的webpack.config.js
中的样子:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
template: 'path/to/empty/template',
filename: 'path/to/templated/output'
})
],
...
};
以上是关于未捕获的ReferenceError:require未定义Webpack + AngularJS的主要内容,如果未能解决你的问题,请参考以下文章
我试图在 Electron.js 中单击按钮时打开新窗口,但未捕获 ReferenceError: require is not defined
未捕获的 ReferenceError: $ 未定义 (VueJS)
解决 Node.js 中的“Uncaught ReferenceError: require is not defined”错误