Webpack入門——使用Webpack打包Angular專案的一個例子
(一)什麼是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 <!DOCTYPE html>
2 <html ng-app="app">
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>Angular with Webpack</title>
6 </head>
7 <body>
8 <h1>Angular + Webpack</h1>
9 <hello-world></hello-world>
10 <script src="bundle.js"></script>
11 </body>
12 </html>
可以看到主頁面是非常乾淨清爽的,只引入了一個輸出檔案bundle.js,然後html標籤里加了ng-app="app"。
6.指令檔案hello-world.js
1 module.exports = function(ngModule) {
2 ngModule.directive('helloWorld', helloWorldFn);//定義指令,對應頁面中的<hello-world></hello-world>
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 <div class="hello-world">
2 {{vm.greeting}}
3 </div>
1 .hello-world {
2 color: red;
3 border: 1px solid green;
4 }
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,以下是server.js的程式碼:
1 var port = 8000,
2 express = require('express'),
3 app = express();
4 app.use('/', express.static(__dirname));
5 app.listen(port);
6 console.log('Now serving http://localhost:' + port + '/index.html');
使用之前要先安裝express:npm install express,然後在命令列工具中輸入node server.js開啟服務,這時在瀏覽器中輸入:localhost:8000/index.html即可訪問主頁面。
另外一個方法是用require的方式引入hello-world.html:
template: require('./hello-world.html')
(三)補充
(1)編譯的命令"webpack"後面可以加引數,如:
"webpack -p"表示對打包後的檔案進行壓縮
"webpack -w"表示實時進行打包更新
"webpack -d"表示提供source map,方便除錯
(2)webpack-dev-server可以提供實時監視檔案變化的功能,使用之前先安裝webpack-dev-server:
npm install webpack-dev-server -g
然後在命令列中輸入:webpack-dev-server --progress --colors,顯示以下結果:
這時在瀏覽器中輸入:localhost:8080(localhost:8080/webpack-dev-server),你對靜態資源的任何改動都會直接反映到主頁面中。
---------------------------------------------------------------------------- 華麗的分割線 ----------------------------------------------------------------------------
總結:這是一個Webpack+Angular的典型例子,包含了最基本的打包js檔案、css檔案、scss檔案、圖片、字型的方法。通過這幾天對Webpack的學習,發現有關Webpack的資料確實是非常少的,百度百科和維基百科上甚至都沒有這個詞條。希望這篇文章可以幫助大家入門。
轉載:http://www.cnblogs.com/kagol/archive/2016/01/23/5152734.html