原料
平臺：windows，
命令行git bash 工具
工具：
npm
webpack
less , less-loader,css-loader, style-loader
ui-router, oclazyload
安裝插件
1、安裝npm工具對插件進行管理
windows中，需要下載 nodejs , nodejs中自帶npm，所以安裝好
nodejs 后，npm就安裝完畢
2、安裝webpack并初始化
進入 gitbash
cd /d
mkdir bigdata && cd bigdata
npm init -y
npm install --save-dev webpack
3、安裝插件
接著上面步驟：
npm install --save-dev less less-loader css-loader style-loader
4、安裝angularjs的組件
npm install --save-dev angularjs angular-ui-router oclazyload
5、安裝完成后如圖
Paste_Image.png
建立網頁進行測試
建立主頁面 index.html
<!doctype html>
<html data-ng-app="app">
<head>
<title>blog</title>
<meta charset="utf-8">
</head>
<body>
<div id="content" class="app-light" ui-view></div>
<script src="dist/bundle.js"></script>
</body>
</html>
建立 index.js
'use strict';
import './app.less';
angular = require('angular');
var app = angular.module("app", [
require('angular-ui-router'),
require('oclazyload')
])
.config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/app");
$stateProvider
.state("app", {
url: "/app",
templateUrl: "html/app.html"
})
}
])
.controller("appCtrl",function($scope){
$scope.names = [1,2,3,4,5,6,7,8,9];
})
建立 app.less
@size:800px;
.app-light{
background:red;
margin:auto;
width: @size;
}
建立html的文件夾，再在里面建立app.html的文件
<div ng-controller="appCtrl">
<div ng-repeat="x in names" ng-style="{
'background':'black',
'width':'100px',
'height':'100px',
'display':'inline-block',
'margin':'10px'
}"></div>
</div>
建立配置文件 webpack.config.js
var path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
建立文件完畢
6、編譯運行文件
進入git bash 中，cd 到 bigdata的文件夾中
輸入命令
webpack
運行文件夾下面的index.html
運行效果
Paste_Image.png
