webpack angular 指令文件怎么打包？

安装Webpack及其他组件
安装Webpack之前建议先安装Node.js，然后采用npm的方式来安装Webpack：
npm install webpack -g
因为要用到angular，所以要安装angular：npm install angular

还要安装一系列加载器(loader)：

npm install style-loader css-loader url-loader sass-loader raw-loader

注意：除了webpack是全局安装之外，其他组件都是安装在app文件夹下面，会自动生成node_modules文件夹。

3.配置文件webpack.config.js

4.入口文件index.js

require用于引入外部模块(可以是对象，可以是函数，可以是css样式，可以是html页面等)

5.主页面index.html

可以看到主页面是非常干净清爽的，只引入了一个输出文件bundle.js，然后html标签里加了ng-app="app"。

6.指令文件hello-world.jsmodule.exports用于将模块(文件)作为一个接口(一般是一个函数)暴露给外部。

7.其他文件(style.css、hello-world.html、hello-world.scss)

8.编译和运行

在命令行工具中输入：webpack，即可编译。

我们会遇到第一个坑：

这个错误的关键行在"You may need an appropriate loader to handle the file type"，大概意思就是你的加载器(loader)不正确，可是我们明明安装上了所有的加载器啊，也在配置文件中引用了呀，原来问题出在配置文件中的"module"下的"loader"应该是"loaders"，就因为少了一个"s"，浪费我一上午的时间。

修改过来之后，编译通过了，我们在浏览器中打开主页面index.html，这时遇到了第二个坑：

大概意思是你跨域了，不能加载hello-world.html这个文件，问题出在指令文件hello-world.js中的引用模板地址的代码：

templateUrl: 'directives/hello-world/hello-world.html'

在网上搜到一个解决办法，就是使用Node.js自带的的http-server.

使用之前要先安装express：npm install express，然后在命令行工具中输入node server.js开启服务，这时在浏览器中输入：localhost:8000/index.html即可访问主页面。

另外一个方法是用require的方式引入hello-world.html：
template: require('./hello-world.html')