javascript - 未捕获的 ReferenceError:未定义 Webpack + AngularJS
问题描述
像这样的问题有几十个,但没有一个有帮助,因为根本原因总是我没有做。我正在使用 webpack 4.26.1 为浏览器制作一个捆绑包,Uncaught ReferenceError: require is not defined
无论我做什么,当我在浏览器中打开 web 应用程序时,我都会收到。
我没有使用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 配置,包的文件名对于开发和生产模式是不同的。我现在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'
})
],
...
};
推荐阅读
- ruby-on-rails - 如何在 Rails 中使用丰富的连接表
- curl - Openshift (curl):从容器中获取对主 API 的访问权限
- angular - Angular 嵌套组件路由
- python - 使用切片获取未知大小列表的最后一个元素
- angular - Angular ng-bootstrap Modal Open 不支持 TemplateRef 作为从模板传递的自定义组件
- symfony - 导入突出显示,就像包不存在(Symfony 4)
- cloud-foundry - 在 Cloud Foundry 上安装 Bosh 会出错
- reporting-services - SSRS - 总和最后 12 项
- html - 如何使用固定的第一左列设置水平滚动条并且使用纯 HTML/CSS 设置没有垂直滚动条
- android - java.lang.NoClassDefFoundError: 在 net.aaaaa (JodaTimeAndroid.java:39)