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

最新推荐文章于 2024-05-13 09:30:05 发布

Doniet

最新推荐文章于 2024-05-13 09:30:05 发布

阅读量2.1k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Doniet/article/details/75635428

版权

web前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、写在前面的话

网上看了许多的博客，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'
    },
    output : {
      path : BUILD,
      filename : 'bundle.js'
    }
}

接下来就是配置module模块。

安装各种loader

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

配置如下：

{
      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>

Doniet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node+webpack+angular+bootstrap创建web项目

一、写在前面的话网上看了许多的博客，angular加node创建web项目的博客很少，有也介绍很粗略，因此，决定自己写一篇详细介绍nodejs加angularjs搭建web环境。由于初学angular，许多的用法还不是很清楚，欢迎大神们指正。二、准备及项目目录安装node—相关介绍，请自己搜索。web项目目录：三、搭建web环境创建项目目录angularCode，在控制台执行 D:\n
复制链接

扫一扫