原料
平台：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
网友评论
ERROR in ./node_modules/angular-ui-router/release/ui-router-angularjs.js
Module not found: Error: Can't resolve 'angular' in 'D:\demo\svn\node_modules\angular-ui-router\release'
@ ./node_modules/angular-ui-router/release/ui-router-angularjs.js 9:84-102
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://10.189.166.125:3003 webpack/hot/dev-server ./src/index.js
ERROR in ./node_modules/angularjs/index.js
Module not found: Error: Can't resolve 'angular' in 'D:\demo\svn\node_modules\angularjs'
@ ./node_modules/angularjs/index.js 1:0-18
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://10.189.166.125:3003 webpack/hot/dev-server ./src/index.js
webpack: Failed to compile.
"angularjs": "0.0.1",
"webpack": "^3.5.3",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0",
这是我的版本。