1. Install webpack & angular:

npm install webpack angular

2. Create webpack.config.js file:

module.exports = {

    context: __dirname + '/app',

    entry: './app.js',

    output: {

        path: __dirname + '/build',

        filename: 'bundle.js'

    }

}

The context is: app folder

The entry file is: app.js

The output: path is build folder and filename is bundle.js.

3. app.js:

var anuglar = require('angular');

var ngModule = angular.module('app', []);

console.log(ngModule);

4. index.js:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Webpack + AngularJS</title>

</head>

<body ng-app="app">

</body>

<script src="../build/bundle.js"></script>

</html>

5. run webpack:

webpack -watch

6. In the web broswer console, you will see the ngModule object.

[AngularJS + Webpack] Using Webpack for angularjs的更多相关文章

  1. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  2. AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器

    AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

  3. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  4. AngularJS 1.x系列：AngularJS简介及第一个应用（2）

    1. 安装AngularJS 1.1 AngularJS官网 Github源码:https://github.com/angular/angular.js 官网:https://angularjs.o ...

  5. 安装webpack和webpack打包（此文转自Henery）

    Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...

  6. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  7. AngularJS 1.x系列：AngularJS服务-Service

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  8. 优雅哥学 Webpack - 01 - Webpack 5 快速体验

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...

  9. AngularJS开发指南11：AngularJS的model，controller，view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

随机推荐

  1. javaweb学习总结(四十一)——Apache的DBUtils框架学习

    一.commons-dbutils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...

  2. asp.net上传图片(简单)

    FileUpload: protected void UploadButton_Click(object sender, EventArgs e) { : Convert.ToInt64(Reques ...

  3. Altium designer入门篇-过孔不开窗

    有没有觉得在设计PCB的时候,放的过孔开窗了,在焊接实际PCB板子的时候,会有各种锡尖,拖锡尾巴,严重的网络间短路.此经验简述了使用Altium designer软件,让过孔不开窗的设置办法.初学者可 ...

  4. 【Linux安全】文件或目录权限设置

    实例演示: 要求:新建文件夹,名称为secure,要求改文件夹只能被创建者deadmin以及与deadmin同组用户进行读.写.执行的权限, 其他用户均只有读的权限. 查看 一下secure原本的权限 ...

  5. prim（与边无关，适合稠密的图，o(n^2)）---还是畅通工程

    题目1017:还是畅通工程 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1653 解决:838 题目描述:     某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“ ...

  6. 【HDOJ】1225 Football Score

    这种结构体排序的题,十分容易考上机题,qsort+结构体解决.马上就要机考了,多练习一下这样的题目也好. #include <stdio.h> #include <string.h& ...

  7. hadoop namenode启动过程详细剖析及瓶颈分析

    NameNode中几个关键的数据结构 FSImage Namenode 会将HDFS的文件和目录元数据存储在一个叫fsimage的二进制文件中,每次保存fsimage之后到下次保存之间的所有hdfs操 ...

  8. linux 失败无连接 检查电缆吗

    将BOOTPROTO=dhcp改成 BOOTPROTO=static 改成手动获取IP的模式 原因: 虚拟机中的Linux目前是默认设成的自动获取IP设置,但你的网络中没有DHCP服务,所以会显示“正 ...

  9. 结构体dfield_t

    /* SQL data field struct */ typedef struct dfield_struct dfield_t; /** Structure for an SQL data fie ...

  10. c语言实用功能库函数#include<stdlib.h>

    实用函数<stdlib.h> 在头文件<stdlib.h>中说明了用于数值转换.内存分配以及具有其他相似任务的函数. 1 atof #include <stdlib.h& ...