我正在使用node和webpack将图形设计公司的HTML模板工作到我的Angular 2项目中。
HTML提供了各种各样的脚本：
<script src="js/jquery.icheck.min.js"></script>
<script src="js/waypoints.min.js"></script>
所以我在我的component.ts中要求它们：
var icheckJs = require('../js/jquery.icheck.min');
var waypointsJs = require('../js/waypoints.min');
还有其他一些脚本和一些SASS似乎正常工作。
webpack很高兴并且全部构建，'npm start'也很成功。但是，当它到达浏览器时，我收到了这个投诉：
Uncaught ReferenceError: require is not defined node_modules/angular2/platform/browser.js:1 Uncaught ReferenceError: require is not defined
实际上是来自url.js：
的这一行var punycode = require('punycode');
这是CommonJs要求吗？几个星期前我还没有在网页开发中使用它，所以我还在解决webback的各种需求，CommonJs等。
我的webpack.config.js中.js加载程序的摘录如下所示：
{ test: /\.js$/, loader: 'script' }
如何解决此错误？
答案 0 :(得分：9)
WebPack可以单独完成此操作。您需要确保首先使用脚本src标记加载初始块。它通常是条目的值：附加-bundle的WebPack配置中的键。如果您没有进行显式分块，则您的条目块应该是初始块和入口块，并且其中包含WebPack运行时。 WebPack运行时包含并在代码运行之前加载require函数。
由于您的脚本将从那里开始，因此需要从条目文件中要求您的组件或您需要的任何内容。基本上，如果您没有明确地分块，那么入口点JS文件是您可以在脚本src中包含的唯一文件。其他所有东西都需要它。您包含的内容通常包含JS文件名中的包。默认情况下，它应该是main-bundle.js。
答案 1 :(得分：0)
您可以在一行中假设您有
dist/bundle.js 将在浏览器中呈现页面的源文件客户端代码
client/client.js
webpack && webpack ./client/client.js dist/bundle.js \
&& webpack-dev-server --progress --color
您需要再次运行webpack，因为如果库中的某些来源发生更改，您将获得dist/bundle.js包中的最后更改（当然您可以像grunt文件一样添加为此观看任务）。 webpack-dev-server将运行服务器。
答案 2 :(得分：0)