如何在Webpack中使用自定义JS类?

时间:2017-08-07 20:39:08

标签: javascript angular webpack

我有一个使用Webpack构建的Angular 2应用程序。我有一个customJS文件,其中包含了我想在JS中做的一些比Angular更容易做的事情。但是,当我尝试将其包含在我的项目中时,我尝试加载页面时出现404 GET错误。

+-- projectName
|   +-- customJS.js
|   +-- app
|   |    +-- Angular 2 ts files
|   +-- dist
|   |    +-- webpackBundle.js

我的HTML看起来像:

<!DOCTYPE html>
<html><head>
<base href="/projectName/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="customJS.js"></script>

<link href="jumbotron.css" rel="stylesheet">

</head>
<body>
 <myApp></myApp>
</body>
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="dist/webpackBundle.js"></script>
</html>

我是否正确编码?其他所有内容都正确加载,而不是customJS代码。

1 个答案:

答案 0 :(得分:0)

如果您正在使用webpack,为什么不将customJS作为导出添加到捆绑包中?

//customJS.js
<code>
export default SomethingCustom;

//main.js
import SomethingCustom from '../customJS';

SomethingCustom.somethingAwesome();