node+webpack+angular+bootstrap建立web專案
阿新 • • 發佈：2019-01-02
一、寫在前面的話
網上看了許多的部落格，angular加node建立web專案的部落格很少，有也介紹很粗略，因此，決定自己寫一篇詳細介紹nodejs加angularjs搭建web環境。由於初學angular，許多的用法還不是很清楚，歡迎大神們指正。
二、準備及專案目錄
安裝node—相關介紹，請自己搜尋。
web專案目錄：
三、搭建web環境
- 建立專案目錄angularCode，在控制檯執行
D:\nodeSpace\angularCode>npm init然後一直按enter鍵，最後輸入yes，這樣根目錄下就建立好一個package.json 檔案。
- 安裝webpack及angular
D:\nodeSpace\angularCode>npm install webpack angular --save-dev- 配置webpack.config.js
var webpack = require('webpack'),
path = require('path');
var ROOT = path.resolve(__dirname),
APP = path.resolve(ROOT,'app'),
BUILD = path.resolve(ROOT,'dist');
module.exports = {
context : APP,
entry : {
app : './index.js' 接下來就是配置module模組。
- 安裝各種loader
D:\nodeSpace\angularCode>npm install --save babel-loader ng-annotate-loader babel-preset-es2015loaders配置如下
{
test : /\.js$/,
loader : 'ng-annotate!babel?presets[]=es2015!jshint' 然後安裝圖片及樣式的loaders：
D:\nodeSpace\angularCode>npm install --save url-loader style-loader css-loader配置如下：
{
test : /\.css$/,
loaders : ['style','css'],
include : APP
},{
test : /\.(png|gif|jpg)$/,
loader : 'url-loader?limit=8192'
}- 接著編寫index.html和index.js檔案
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>angular-webpack</title>
</head>
<body>
<p>{{1+1===2}}</p>
<script type="text/javascript" src="./bundle.js"></script>
</body>
<html>