Webpack最近很熱，用webapcak構(gòu)建react，vue，angular2.0的文章很多，但是webpack構(gòu)建angualr1.0的文章找來找去也沒有一篇讓我感覺到很滿意的，好多都運(yùn)行報(bào)錯(cuò)，所以我參考了幾篇文章，寫一篇webpack前端構(gòu)建angular1.0的文章指南。本文適合第一次接觸webpack的朋友，如果是老鳥，就不用看了。
添加webpack.config.js文件，添加了最重要的webpack的配置文件，我們還是從非常簡(jiǎn)單的hello world開始玩起，webpack原生直接支持AMD和CommonJS兩種格式，如果你想使用ES6的風(fēng)格，這點(diǎn)以后再提。
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']? }]
},
//自動(dòng)啟動(dòng)瀏覽器plugins: [
newOpenBrowserPlugin({url:'http://localhost:8080'})
]};
添加app.js
//引入angular
var angular = require('angular');
//定義一個(gè)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
添加helloWorld.js
module.exports = function(ngModule) {
//定義指令，對(duì)應(yīng)頁面中的
ngModule.directive('helloWorld', helloWorldFn);
function helloWorldFn() {
return{//元素(element)restrict:'E',scope: {},templateUrl:'/app/helloWorld/helloWorld.html',controllerAs:'vm',controller:function(){varvm =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
自動(dòng)保存package.json文件，如果直接復(fù)制package.json文件執(zhí)行下面命令：
sudo npm install
webpack編譯文件
sudo npm run build
會(huì)自動(dòng)生成buid文件夾壓縮js文件
webpack自動(dòng)啟動(dòng)瀏覽器訪問idnex.html
sudo npm run dev
也可以在瀏覽器直接訪問：
見證奇跡的時(shí)候到了，然后神奇的發(fā)現(xiàn)：
最后恭喜你用webpack構(gòu)建angular1.0成功了！！！
如果有什么疑問歡迎留言。。。
大神勿噴，感謝手下留情~~~
