(一)什么是Webpack

　　Webpack是一个前端的模块管理东西(module bundler)，以下是webpack的官网：http://webpack.github.io/，一进入官网能够看到下面这张大图：

这张图基本上诠释了webpack是用来干吗的，将一些相互依赖的模块(文件)，打包成一个或多个js文件，削减http要求次数，提拔机能。这些相互依赖的模块能够是图片、字体、coffee文件、款式文件、less文件等。

　　详细怎样用呢？接下来我将用一个例子来申明：

(二)一个Webpack+Angular的例子

1.先看下目次构造

2.装置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

1 module.exports = {
2 context: __dirname + '/app',//上下文
3 entry: './index.js',//进口文件
4 output: {//输出文件
5 path: __dirname + '/app',
6 filename: './bundle.js'
7 },
8 module: {
9 loaders: [//加载器
10 {test: /\.html$/, loader: 'raw'},
11 {test: /\.css$/, loader: 'style!css'},
12 {test: /\.scss$/, loader: 'style!css!sass'},
13 {test: /\.(png|jpg|ttf)$/, loader: 'url?limit=8192'}
14 ]
15 }
16 };

4.进口文件index.js

1 var angular = require('angular');//引入angular
2 var ngModule = angular.module('app',[]);//定义一个angular模块
3 require('./directives/hello-world/hello-world.js')(ngModule);//引入指令(directive)文件
4 require('./css/style.css');//引入款式文件

require用于引入外部模块(能够是对象，能够是函数，能够是css款式，能够是html页面等)

5.主页面index.html

1
2
3
4
5 Angular with Webpacktitle>
6
7
8

Angular + Webpack

能够看到主页面是异常清洁清新的，只引入了一个输出文件bundle.js，然后html标签里加了ng-app=&＃8221;app&＃8221;。

6.指令文件hello-world.js

1 module.exports = function(ngModule) {
2 ngModule.directive('helloWorld', helloWorldFn);//定义指令，对应页面中的
3 require('./hello-world.scss');
4 function helloWorldFn() {
5 return {
6 restrict: 'E',//元素(element)
7 scope: {},
8 template: require('./hello-world.html'),//模板
9 //templateUrl: 'directives/hello-world/hello-world.html',
10 controllerAs: 'vm',// <=> $scope.vm = {greeting: '你好，我是卡哥'}
11 controller: function () {
12 var vm = this;
13 vm.greeting = '你好，我是卡哥，很愉快见到你';
14 }
15 }
16 }
17 }

module.exports用于将模块(文件)作为一个接口(平常是一个函数)暴露给外部。

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

1 @font-face{
2 font-family: 'maozedong';
3 src: url(../fonts/maozedong.ttf);
4 }
5 body{
6 background: url(../images/longmao.jpg) yellowgreen;
7 font-size: 24pt;
8 color: #fff;
9 font-family: 'maozedong';
10 }

1

1 .hello-world {
2 color: red;
3 border: 1px solid green;
4 }

8.编译和运转

在敕令行东西中输入：webpack，即可编译，这时候我们会碰到第一个坑：

这个毛病的症结行在&＃8221;You may need an appropriate loader to handle the file type&＃8221;，也许意义就是你的加载器(loader)不正确，但是我们明显装置上了一切的加载器啊，也在配置文件中援用了呀，我在网上找了良久都没找到题目所在，厥后照样一名仔细的同事帮我处理这个题目的，本来题目出在配置文件中的&＃8221;module&＃8221;下的&＃8221;loader&＃8221;应该是&＃8221;loaders&＃8221;，就由于少了一个&＃8221;s&＃8221;，糟蹋我一上午的时候。

修正过来以后，编译经由过程了，我们在浏览器中翻开主页面index.html，这时候碰到了第二个坑：

也许意义是你跨域了，不能加载hello-world.html这个文件，题目出在指令文件hello-world.js中的援用模板地点的代码：

templateUrl: &＃8216;directives/hello-world/hello-world.html&＃8217;

在网上搜到一个处理办法，就是运用Node.js自带的的http-server，以下是server.js的代码：

运用之前要先装置express：npm install express，然后在敕令行东西中输入node server.js开启效劳，这时候在浏览器中输入：localhost:8000/index.html即可接见主页面。

别的一个要领是用require的体式格局引入hello-world.html：

template: require(&＃8216;./hello-world.html&＃8217;)

(三)补充

(1)编译的敕令&＃8221;webpack&＃8221;背面能够加参数，如：

&＃8220;webpack -p&＃8221;示意对打包后的文件举行紧缩

&＃8220;webpack -w&＃8221;示意及时举行打包更新

&＃8220;webpack -d&＃8221;示意供应source map，轻易调试

(2)webpack-dev-server能够供应及时看管文件变化的功用，运用之前先装置webpack-dev-server：

npm install webpack-dev-server -g

然后在敕令行中输入：webpack-dev-server &＃8211;progress &＃8211;colors，显现以下效果：

这时候在浏览器中输入：localhost:8080(localhost:8080/webpack-dev-server)，你对静态资本的任何修改都邑直接反应到主页面中。

&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212; 华美的分割线 &＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;

总结：这是一个Webpack+Angular的典范例子，包含了最基本的打包js文件、css文件、scss文件、图片、字体的要领。经由过程这几天对Webpack的进修，发明有关Webpack的材料确切是异常少的，百度百科和维基百科上甚至都没有这个词条。愿望这篇文章能够协助人人入门。