node+webpack+angular+bootstrap创建web项目

来源：互联网发布：怎么在国外注册域名编辑：程序博客网时间：2024/05/02 14:06

一、写在前面的话

网上看了许多的博客，angular加node创建web项目的博客很少，有也介绍很粗略，因此，决定自己写一篇详细介绍nodejs加angularjs搭建web环境。由于初学angular，许多的用法还不是很清楚，欢迎大神们指正。

二、准备及项目目录

1、安装node---相关介绍，请自己搜索。

2、web项目目录：

三、搭建web环境

1、创建项目目录angularCode，在控制台执行

   D:\nodeSpace\angularCode>npm init

然后一直按enter键，最后输入yes，这样根目录下就创建好一个package.json 文件。

2、安装webpack及angular

   D:\nodeSpace\angularCode>npm install webpack angular --save-dev

3、配置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'},output : {      path : BUILD,      filename : 'bundle.js'}}

接下来就是配置module模块。首先安装：

D:\nodeSpace\angularCode>npm install --save babel-loader ng-annotate-loader babel-preset-es2015
loaders配置如下

 {     test : /\.js$/,     loader : 'ng-annotate!babel?presets[]=es2015!jshint',     exclude: /node_modules/ }

然后安装图片及样式的loaders：

D:\nodeSpace\angularCode>npm install --save url-loader style-loader css-loader

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>

0 0