Webpack入門——使用Webpack打包Angular項目的一個例子

時間 2019-11-09

標籤 webpack 入門使用打包 angular 項目一個例子欄目 AngularJS 简体版

原文原文鏈接

(一)什麼是Webpack

　　Webpack是一個前端的模塊管理工具(module bundler)，如下是webpack的官網：http://webpack.github.io/，一進入官網能夠看到下面這張大圖：css

這張圖基本上解釋了webpack是用來幹嗎的，將一些相互依賴的模塊(文件)，打包成一個或多個js文件，減小http請求次數，提高性能。這些相互依賴的模塊能夠是圖片、字體、coffee文件、樣式文件、less文件等。html

　　具體怎麼用呢？接下來我將用一個例子來講明：前端

(二)一個Webpack+Angular的例子

1.先看下目錄結構

2.安裝Webpack及其餘組件

安裝Webpack以前建議先安裝Node.js，而後採用npm的方式來安裝Webpack：node

npm install webpack -gwebpack

由於要用到angular，因此要安裝angular：git

npm install angulargithub

還要安裝一系列加載器(loader)：web

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

注意：除了webpack是全局安裝以外，其餘組件都是安裝在app文件夾下面，會自動生成node_modules文件夾。npm

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 <html ng-app="app">
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title>Angular with Webpacktitle>
 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);//定義指令，對應頁面中的
 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，這時遇到了第二個坑：