webpack前端构建angular1.0
Webpack近来很热,用webapcak构建react,vue,angular2.0的文章许多,然则webpack构建angualr1.0的文章找来找去也没有一篇让我感觉到很惬意的,很多都运转报错,所以我参考了几篇文章,写一篇webpack前端构建angular1.0的文章指南。本文合适第一次打仗webpack的朋侪,假如是老鸟,就不必看了。
装置
先装好node和npm,由于webpack是一个基于node的项目。然后检察node是不是装置胜利:
node -v && npm -v
全局装置webpack
npm install -g webpack
检察webpack是不是装置胜利:
npm -vwebpack中文社区:
https://doc.webpack-china.org/
竖立项目
建一个文件夹,然后新建一个package.json的文件在项目根目录下
mkdir webpackAngular
cd webpackAngular
npm init
项目构造
如今项目内里就有一个package.json, 我们多加一点东西,逐步雄厚它的内容。
增加index.html文件
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>webpackAngular</title>
</head>
<body>
<h1>webpack + Angular </h1>
<hello-world></hello-world>
<script src="/build/main.js"></script>
</body>
</html>
增加webpack.config.js文件,增加了最主要的webpack的配置文件,我们照样从异常简朴的hello world最先玩起,webpack原生直接支撑AMD和CommonJS两种花样,假如你想运用ES6的作风,这点今后再提。
webpack.config.js
var webpack = require("webpack");
var path = require("path");
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
//上下文
context: __dirname + '/app',
//进口文件
entry: './app.js',
//输出文件
output: {
path: __dirname + '/build',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}
]
},
//自动启动浏览器
plugins: [
new OpenBrowserPlugin({ url: 'http://localhost:8080' })
]
};
增加app.js
//引入angular
var angular = require('angular');
//定义一个angular模块
var ngModule = angular.module('app',[]);
//引入指令文件
require('./helloWorld/helloWorld.js')(ngModule);
//引入款式文件
require('./css/style.css');
增加style.css
.ing{
height: 48px;
position: relative;
top:30%;
left: 40%;
background-image:url('/app/images/loader.gif');
background-repeat: no-repeat;
font-size: 24px;
color: #000;
}
.hello-world {
color: red;
border: 1px solid green;
}
增加helloWorld.html
<div class="ing"></div>
<div class="hello-world">
<span ng-bind="vm.greeting"></span>
</div>
增加helloWorld.js
module.exports = function(ngModule) {
//定义指令,对应页面中的<hello-world></hello-world>
ngModule.directive('helloWorld', helloWorldFn);
function helloWorldFn() {
return {
//元素(element)
restrict: 'E',
scope: {},
templateUrl: '/app/helloWorld/helloWorld.html',
controllerAs: 'vm',
controller: function () {
var vm = this;
console.log('this',this);
vm.greeting = '你好,我是Alan,很愉快见到你!';
}
}
}
}
装置依靠文件
sudo npm isntall angular –save-dev
sudo npm isntall css-loader –save-dev
sudo npm isntall style-loade –save-dev
sudo npm isntall express –save-dev
sudo npm isntall open-browser-webpack-plugin –save-dev
sudo npm isntall webpack –save-dev
sudo npm isntall webpack-dev-server –save-dev
自动保留package.json文件,假如直接复制package.json文件实行下面敕令:
sudo npm install
webpack编译文件
sudo npm run build
会自动天生buid文件夹紧缩js文件
webpack自动启动浏览器接见idnex.html
sudo npm run dev
也能够在浏览器直接接见:
http://localhost:8080/
见证奇观的时刻到了,然后奇异的发明:
末了祝贺你用webpack构建angular1.0胜利了!!!
假如有什么疑问迎接留言。。。
大神勿喷,谢谢手下留情~~~